(echarts)vue中循环生成多个相同的echarts图表，但数据动态

(echarts)vue中循环生成多个相同的echarts图表，但数据动态

效果：

代码：

<!-- 动态图表 -->
<el-row :gutter="20">
  <el-col v-for="(item,index) in echartsList" :key="index" :span="10" style="margin: 10px 10px;">
    <div class="mainTest" style="width:100%;height:400px;" />
  </el-col>
</el-row>

//查询图表数据
searchData(){
	...
	// 模拟数据
	this.echartsList = [{ 
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }, {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }
    ...
    ]
    // 重点（不用nextTick 第一次渲染不出来）
    this.$nextTick(() => {
      this.initChart()
    })

}

// 图表
initChart() {
  // 通过getElementsByClassName获取class叫mainTest的div盒子节点
  var chartDom = document.getElementsByClassName('mainTest')
  // 循环所有echarts节点
  for (var i = 0; i < chartDom.length; i++) {
    // 初始化每个图表
    var myChart = echarts.init(chartDom[i])

    var option

    option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      ...
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.echartsList[i].data
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '50%']
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100
        }
      ],
      series: this.echartsList[i].series
    }

    option && myChart.setOption(option, true)

    window.addEventListener('resize', function() {
      // 监听窗口变动实时渲染
      myChart.resize()
    })
  }
}

解决参考：
1.https://blog.csdn.net/weixin_54351962/article/details/124301644

2.https://blog.csdn.net/weixin_47163986/article/details/123373445