How does vue bind echart Chart Loop to dynamic ID

because every chart is the same, you want to use v-for to loop the echart chart

clipboard.png

Code of the loop

<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>

dynamic id

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

id bound by echart

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

how to write the id of echart as ID in the getID () method

Apr.29,2021

  1. you can use regular id, such as id0-1 and id0-2, so that you can regularly get id, and render charts based on index data
  2. .
  3. use ref, to get a reference to div, and render echarts chart directly through dom

the second is recommended. The vue framework should not involve any operation of dom


abstract chart components

Menu