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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be1988-30de4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be1988-30de4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?