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;
          }
        }]
      });