vue+echarts自定义柱状图

<template>
    <div id="inOrderTop10" @click="getMapData()"></div>
</template>

<style lang="scss" scoped>
  #inOrderTop10 {
    width: 90%;
    margin-left: 1.25rem;
    height: calc(100% - 3.375rem);
  }
</style>

/* 初始化生成柱状图 */
    getOption() {
      const myChart = this.$echarts.init(document.getElementById('inOrderTop10'));
      let $this = this;


      let option = {
        grid: {
          top: '1%',
          left: '3%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: { show: false },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },
        series: [
          {
            showBackground: true,
            backgroundStyle: {
              color: '#323f3f',
              barBorderRadius: [0, 50, 0, 0]
            },
            name: '固定底部一',
            type: 'bar',
            stack: '总量',
            label: {
              show: false
            },
            itemStyle: {
              color: '#1c8ab2'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            showBackground: true,
            backgroundStyle: {
              color: '#323f3f',
              barBorderRadius: [0, 50, 0, 0]
            },
            name: '固定底部二',
            type: 'bar',
            stack: '总量',
            label: {
              show: false
            },
            itemStyle: {
              color: 'rgba(255,255,255,0)'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '具体数据',
            type: 'bar',
            stack: '总量',
            showBackground: true,
            backgroundStyle: {
              color: '#323f3f',
              barBorderRadius: [0, 20, 0, 0]
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff',
              formatter: '{c}',
              fontSize: 8
            },


            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 1, color: '#04dcbb' }, { offset: 0, color: '#1c8ab2' }]),
              barBorderRadius: [0, 20, 0, 0]
            },


            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option, true);
      }
      myChart.setOption(option);
    }

/* 获取地图数据,刷新地图数据 */
    getMapData() {
      const myChart = this.$echarts.init(document.getElementById('inOrderTop10'));
      let option = myChart.getOption();


      let yAxis = option.yAxis;
      let series = option.series;


      this.$post('/getBarTop10Data', 'post').then(res => {
        let { code, data, message } = res;
        this.loading = false;
        this.count = 0;
        let nameArr = [];


        let data1 = [];
        let data2 = [];
        let data3 = [];


        if (data && data.length > 0) {
          for (let item of data) {
            nameArr.push(item.name);
            data3.push(item.value);
          }
          yAxis[0].data = nameArr;


          let max = data3[0];
          for (let i = 0; i < data3.length; i++) {
            this.count += parseInt(data3[i]);
            let cur = data3[i];
            cur > max ? (max = cur) : null;
          }
          for (let j = 0; j <= 9; j++) {
            data1.push(max * 0.02);
            data2.push(max * 0.01);
          }
          series[0].data = data1;
          series[1].data = data2;
          series[2].data = data3;
          option.yAxis = yAxis;
          option.series = series;


          if (option && typeof option === 'object') {
            myChart.setOption(option, true);


            window.addEventListener('resize', function() {
              myChart.resize();
            });
          }
        }
      });
    },