鍍金池/ 問(wèn)答/HTML/ vue怎么將echart圖表循環(huán)綁定到動(dòng)態(tài)的ID上

vue怎么將echart圖表循環(huán)綁定到動(dòng)態(tài)的ID上

因?yàn)槊總€(gè)圖表都相同，想要用v-for循環(huán)echart圖表

clipboard.png

循環(huán)的代碼

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

動(dòng)態(tài)的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

回答
編輯回答
熟稔
  1. 可以使用有規(guī)律的id,比如id0-1, id0-2,這樣子就可以有規(guī)律的獲取id,再根據(jù)索引獲取數(shù)據(jù)渲染圖表
  2. 使用ref,取得div的引用，直接通過(guò)dom渲染echarts圖表

推薦第二種，vue框架不應(yīng)該去涉及到dom的任何操作

2017年7月30日 15:11
編輯回答
爛人

把chart組件抽象出來(lái)

2018年2月4日 19:40