vue+echarts 图表排名

<template>
  <div>   
    <div class="gcbodyblock6" style="position: relative">
      <div
        class="box"
        style="
          overflow-y: scroll;
          margin-top: 3px;
          margin-left: 15px;
          font-size: 16px;
          height: 310px;
         "
         >
        <div class="ranktext">         
          <div
            v-for="(item, index) in chartData"
            :key="index"
            :style="{ color: item.color }"
          >
            NO.{{ index + 1 }}
          </div>
        </div>
        <div style="float: left; width: 85%">
          <div v-for="(item, index) in chartData" :key="index">
            <div
              class="barChart"
              :style="{ height: zoomNum * 63 + 'px', zoom: 1 / zoomNum }"
              style="width: 100%; margin: 0 auto"
            ></div>
          </div> 
        </div>   
      </div>
      
    </div>
  </div>
</template>

data() {
    return {
      zoomNum: window.screen.width / 1920, 
      tabActive: "1",
      scheduleData: [],
      noticesData: [],
      scrollHeight2: 0,
      animate: false,
      timer1: null,
      chartData: [
        {
          myData: 1000,
          title: "xxx项目",
          ydata: 90,
          grayBar: 100,
          color: "#fe6500",
        },
        {
          myData: 800,
          title: "xxx项目",
          ydata: 85,
          grayBar: 100,
          color: "#ec9e00",
        },
        {
          myData: 700,
          title: "xxx项目",
          ydata: 74,
          grayBar: 100,
          color: "#54dc54",
        },
   
      ],
    };
  },

 barCharts1() { 
      var echarts = require("echarts");
      var barCharts = document.getElementsByClassName("barChart");     
      for (var i = 0; i < barCharts.length; i++) {       
        var option = {
          backgroundColor: "",
          grid: {
            left: "13px", // 距离dom间距
            right: "21%",
            top: "9%",
            bottom: "-15px",
          },
          xAxis: [
            {
              show: false,
              type: "value",
              axisPointer: {
                type: "shadow",
              },
              // 横坐标 分割线等取消显示
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              //左侧文字
              type: "category",
              inverse: true,
              axisLabel: {
                verticalAlign: "bottom",
                align: "left",
                padding: [0, 10, 10, 8],
                textStyle: {
                  fontSize: 14,
                  color: "#fff",
                  fontFamily: "Source Han Sans CN",
                },
                formatter(value, index) {
                  index += 1;
                },
                rich: {
                  rank: {
                    width: 36,
                    height: 20,
                    color: "#00d4fc",
                    align: "center",
                    marginRight: 10,
                  },
                },
              },
              // 纵坐标数据
              data: [this.chartData[i].title], 
              yAxisIndex: 0,
              // 横坐标 分割线等取消显示
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
            },
            {
              //右侧文字
              type: "category",
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                inside: false,
                verticalAlign: "right",
                // 位置 上右下左
                padding: [0, 0, 0, 5],
                lineHeight: "0",
                // 控制竖着字体颜色
                textStyle: {
                  fontSize: 22,            
                  color: (params) => {    
                    return this.chartData[i].color;
                  },

                  fontFamily: "SourceHanSansCN-Regular",
                },
                formatter: function (value) {
                  return "{x|" + value + "} {y|" + "万}";
                },
                rich: {
                  x: {
                    fontWeight: "bold",
                    fontSize: 17,
                  },
                  y: {
                    fontSize: 10,
                    lineHeight: 1,
                    alignItems: "bottom",
                  },
                },
              },
    
              data: [this.chartData[i].myData], //[1000]//myData,
            },
            {
              //左侧柱状图的Y轴
              // gridIndex: 0,//y轴所在的 grid 的索引
              splitLine: "none",
              axisTick: "none",
              axisLine: "none",
              data: [],
            },
          ],
          series: [
            {
              //顶层间隔
              show: true,
              type: "pictorialBar",
              symbol: "fixed",
              symbolSize: [2, 10],
              symbolMargin: 2,
              symbolRepeat: "repeat",
              barWidth: 6, // 统计条宽度
              itemStyle: {
                normal: {
                  color: "black",
                },
              },
              z: 2,
              data: [this.chartData[i].ydata], //[80]//ydata,
            },
            {
              //中间层
              show: true,
              type: "bar",
              xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
              yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
              barGap: "-100%",
              barWidth: "10px", // 统计条宽度
              max: 1,
              labelLine: {
                show: false,
              },
              z: 1,
              itemStyle: {
                normal: {
                  color: (params) => {            
                    return this.chartData[i].color;
                  },                  
                },
              },
              data: [this.chartData[i].ydata], //[80]//ydata,
            },
            {
              //底层背景
              name: "外框",
              show: true,
              type: "bar",
              xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
              yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y 轴的时候有用。
              symbolMargin: 0,
              barGap: "-100%",
              barWidth: 16, // 统计条宽度
              itemStyle: {
                normal: {
                  color: "#091a38",
                },
              },
              z: 0,
              data: [this.chartData[i].grayBar], //[100]//grayBar,
            },
          ],
        };
        myChart.setOption(option);
        myChart.resize({
          width: "auto",
          height: "auto",
        });
      }
    },

 mounted: function () {
    this.barCharts1();
  },