VUE根据数组生成多个echarts图

效果图：

 

 

 

 

 HTML代码：

<div class="chart-dis-area" style="display: flex; background-color:#0B1837 ;">
　　<div v-for="(item,index) in chartList" class="chart-item-area" style="width: 20%;">
　　　　<div class="echartsList" :id="item.id" style="height: 225px;"></div>
　　</div>
</div>

JS：

// 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图等组件
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/line')
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/gauge')
  // 引入提示框和title等组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/graphic')
  //引入水球图组件
  import echartsLiquidfill from 'echarts-liquidfill'
  export default {
    data() {
      return {
        chartList: [],    //
        HardDisklength: 0 //获取硬盘数组的数量
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() { //生成对应数量的硬盘echarts图
        var data = [{"a": 68,"b": "C"}, {"a": 12,"b": "D"}, {"a": 5,"b": "E"}, {"a": 20,"b": "F"}]
        var alist = [];
        var blist = [];
        let arr = [];
        this.HardDisklength = data.length;for (let i = 0; i < this.HardDisklength; i++) {
          let item = {
            barChart: '', // chart 对象实例
            id: 'id' + i, // 为了标示 id 不同
          }
          arr.push(item);
          alist.push(data[i].a);
          blist.push(data[i].b);
        }
        console.log(arr);
        this.chartList = arr;
        this.$nextTick(() => {
          for (let i = 0; i < this.chartList.length; i++) {
            this.chartList[i].barChart = echarts.init(document.getElementById(this.chartList[i].id));
            window.onresize = this.chartList[i].barChart.resize;
            this.chartList[i].barChart.setOption(this.HardDiskOption(alist[i], blist[i])); //设置option
          }
        })
      },
      //已使用率    盘符
      HardDiskOption(a, b) {return {
          backgroundColor: "#0B1837",
          title: {
            text: a + '%',
            subtext: b + '盘',
            subtextStyle: {
              fontSize: '15'
            },
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'normal',
              color: '#0580f2',
              fontSize: '30'
            }
          },
          color: ['rgba(176, 212, 251, 1)'],
          series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['50%', '66%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: a,
              name: '01',
              itemStyle: {
                normal: {
                  color: { // 完成的圆环的颜色
                    colorStops: [{
                      offset: 0,
                      color: '#00cefc' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#367bec' // 100% 处的颜色
                    }]
                  },
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }, {
              name: '02',
              value: 100-a
            }]
          }]
        }
      },
    }
  }