zoukankan      html  css  js  c++  java
  • vue动态生成多个Echarts图表

    1.动态循环id

    <div v-for="(item,index) in chartList" :key="index">
      <div :id="`chart${index}`"></div>
    </div>

    2.js部分

    this.chartList = res.data.data.chartList;//从后台获取数据
    if (this.chartList.length > 0) {
      this.$nextTick(() => {
        this.initChart()
      })
    }
    initChart() {
        this.chartList.forEach((val, index) => {
          const myChart = this.$echarts.init( document.getElementById(`chart${index}`))
          //注意this.chartList[index]这是我们后台拼好数据直接set就行了
          myChart.setOption(this.chartList[index])
        })
      }
    },

    参考于:https://www.jianshu.com/p/a7af5814efd9

  • 相关阅读:
    安卓-登陆页面的实现
    异常
    实用类
    Hashset
    Map
    LinkedList
    arraylist
    继承
    字符串相关代码
    数组代码
  • 原文地址:https://www.cnblogs.com/hahahakc/p/13918126.html
Copyright © 2011-2022 走看看