EChart横向图表_l-echart横向

  let myChart = this.$echarts.init(document.getElementById('deviceAlarmStatus'))
      myChart.setOption({
        //        tooltip: {},
        title: {
          text: '昨日用电量65kw/h',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 100,
            fontSize: 22,
          },
            x: 'center',
            // y:"center",
            top: '40%',
            left: '20%',
        },
        xAxis: {
          max: 100,
          splitLine: {
            show: false
          },
          offset: 10,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: [{
          type: "category",
          inverse: false,
          data: ['照明', '微基站', '信息发布屏'],
          position: 'left',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }, ],
        grid: {
          top: '20%',
          left: 120,
          right: 50,
          bottom: 20
        },
        series: [{
          // current data
          type: 'pictorialBar',
          symbol: 'rect',
          symbolRepeat: 'fixed',
          symbolMargin: '20%',
          symbolClip: true,
          symbolSize: [10, 20],
          symbolBoundingData: 100,
          label: {
            normal: {
              show: true,
              position: 'right',
              offset: [0, 0],
              textStyle: {
                color: '#66e7f9',
                fontSize: 18,
                fontWeight: 'bold',
              }
            }
          },
          data: [{
              "value": 56,
              "itemStyle": {
                "normal": {
                  "color": "#ff1578"
                }
              }
            },
            {
              "value": 65,
              "itemStyle": {
                "normal": {
                  "color": "#8e49ff"
                }
              }
            },
            {
              "value": 30,
              "itemStyle": {
                "normal": {
                  "color": "#4261f9"
                }
              }
            },
          ],
          z: 99999999,
          animationEasing: 'elasticOut',
          animationDelay: function(dataIndex, params) {
            return params.index * 30;
          }
        }, {
          // full data
          type: 'pictorialBar',
          itemStyle: {
            normal: {
              color: '#192670'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              offset: [10, 0],
              textStyle: {
                color: 'darkorange',
                fontSize: 16
              }
            }
          },
          animationDuration: 0,
          symbolRepeat: 'fixed',
          symbolMargin: '20%',
          symbol: 'rect',
          symbolSize: [10, 20],
          symbolBoundingData: 100,
          data: [{
              "value": 100,
              label: {
                normal: {
                  show: true,
                  position: [-100, 15],
                  formatter: '{b}',
                  offset: [10, 0],
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            {
              "value": 100,
              label: {
                normal: {
                  show: true,
                  position: [-100, 15],
                  formatter: '{b}',
                  offset: [10, 0],
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            {
              "value": 100,
              label: {
                normal: {
                  show: true,
                  position: [-100, 15],
                  formatter: '{b}',
                  offset: [10, 0],
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            }
          ],
          z: 99999,
          animationEasing: 'elasticOut',
          animationDelay: function(dataIndex, params) {
            return params.index * 30;
          }
        }]
      });
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182