VUE根据数组生成多个echarts图

• Z时代
• 2024-01-10
• 分类：综合

效果图：

 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
            }]
          }]
        }
      },
    }
  }

以上是 VUE根据数组生成多个echarts图 的全部内容， 来源链接： utcz.com/z/379293.html