Vue动态渲染生成多个Antv/g2 （Echarts同理）图表

Vue动态渲染生成多个antv/g2 （echarts同理）图表

一、引入antv/g2g2技术（暂不描述）

二、动态循环实例

<div v-for="(item,index) in chartList" :key="index" class="osm">
	<div :id="`chart${index}`" style="width:300px; height:100px;margin-bottom: 16px;float: right;">
	</div>
</div>

三、整合图表数据

drawAllCharts() {
    this.chartList = this.tableData.data //从后台获取数据
    if (this.chartList.length > 0) {
        this.$nextTick(() => {
            this.initChart()
        })
    }
}

四、初始化多个实例

initChart() {
      this.chartList.forEach((val, index) => {
        const chart = new G2.Chart({
          container: `chart${index}`,
          width: 300,
          height: 100
        })
        chart.data(this.chartList)
        chart.coordinate().transpose().scale(1, -1)
        chart
          .interval()
          .position('task*range')
          .color('status', ['#2FC25B', '#F04864'])
        chart.render()
      })
    }

结束！ 2021，祝好！