Vue3 遍历echats图表

1.导入echart

import * as echarts from 'echarts'

2.主要实现代码

这里使用动态id方法实现遍历

<div v-for="(item,index) in showData" :key="index">
 <div style="width:100%;height:55%;">
          <div :id="'lineRef'+index" style="width: 100%;height: 100%">
          </div>
        </div>
      </div>
</div>

主要方法，option为echarts图表代码

const ininShowData = () => {
  for (let i = 0; i < showData.value.length; i++) {
    const ele = document.getElementById('lineRef' + i)
    if (ele) {
      ele.removeAttribute('_echarts_instance_')
      echarts.init(ele as HTMLElement).dispose();
      const chartOne = echarts.init(ele as HTMLElement);
      let option = showData.value[i].option;
      option.xAxis.data = showData.value[i].source.xdata;
      option.series[0].data = showData.value[i].source.sdata;
      chartOne.setOption(option);
    }
  }
}