vue怎么将echart图表循环绑定到动态的ID上

Question

因为每个图表都相同，想要用v-for循环echart图表

循环的代码

<el-col :span="6" v-for="(item,index) of items" :key="item.id">
    <div class="body">
      <div class="echart" :id="getID(index)"></div>
    </div>
</el-col>

动态的id

getID(index) {
  return "echart_" + index;
}

echart绑定的id

mounted() {
    this.$nextTick(function() {
      this.drawPie("chart");
    });
},
drawPie(id) {
  this.charts = echarts.init(document.getElementById(id));
},

怎么样将echart的id写成getID()方法中的ID

Answer 1

1. 可以使用有规律的id,比如id0-1, id0-2,这样子就可以有规律的获取id,再根据索引获取数据渲染图表
2. 使用ref,取得div的引用，直接通过dom渲染echarts图表

推荐第二种，vue框架不应该去涉及到dom的任何操作

Answer 2

把chart组件抽象出来