1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| <template>
| <div class="echarts-wrapper">
| <div class="echarts-content" ref="monomerVoltage">
|
| </div>
| </div>
| </template>
|
| <script>
| import * as echarts from 'echarts';
|
| export default {
| name: "monomerVoltage",
| chart: "",
| props: {
| id: {
| require: true,
| type: String,
| default: "",
| },
| name: {
| type: String,
| default: ""
| },
| top: {
| type: Number,
| default: 15,
| },
| bottom: {
| type: Number,
| default: 60
| },
| space: {
| type: Number,
| default: 4
| },
| },
| data() {
| return {
|
| }
| },
| methods: {
| setOption(opt) {
| this.$options.monomerVoltage.setOption(opt);
| },
| setData() {
| let option = {
| // title: {
| // text: '世界人口总量',
| // subtext: '数据来自网络'
| // },
| tooltip: {
| trigger: 'axis',
| axisPointer: {
| type: 'shadow'
| }
| },
| legend: {
| right:"4%",
| data: ['单体电压', '单体内阻','单体温度'],
| itemStyle:{
| right:"0"
| }
| },
| grid: {
| left: '3%',
| right: '4%',
| bottom: '3%',
| containLabel: true
| },
| xAxis: {
| type: 'value',
| boundaryGap: [0, 0.01]
| },
| yAxis: {
| type: 'category',
| data: ['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例']
| },
| series: [
| {
| name: '单体电压',
| type: 'bar',
| data: [24, 18, 38, 31, 24, 13],
| itemStyle:{
| color:'#FED601'
| }
| },
| {
| name: '单体内阻',
| type: 'bar',
| data: [19, 28, 46, 24, 14, 9],
| itemStyle:{
| color:'#67E0E3'
| }
| },
| {
| name: '单体温度',
| type: 'bar',
| data: [15, 22, 36, 15, 21, 8],
| itemStyle:{
| color:'#EB6F49'
| }
| }
| ]
| };
| this.setOption(option);
| },
| resize() {
| this.$options.monomerVoltage.resize();
| }
| },
| mounted() {
| // 基于准备好的dom，初始化echarts实例
| this.$options.monomerVoltage = echarts.init(this.$refs.monomerVoltage);
|
| window.addEventListener('resize', this.resize);
| },
| destroyed() {
| window.removeEventListener('resize', this.resize);
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
