使用echarts封裝了一個餅圖，在頁面中使用3次，發(fā)現(xiàn)只有第一個餅圖可以正常顯示。

原因：
組件中，餅圖是根據(jù)id來渲染的，組件不管調用幾次，id都只有一個，重復渲染組件時，發(fā)現(xiàn)id已經被渲染過了，就不會再進行渲染了。

解決方法：
1、調用組件時，傳入不同id，根據(jù)傳入的id進行渲染
2、在封裝的組件中，不使用id進行綁定，而使用ref。如下圖所示：

// template模版
  <div class="comp-code" ref="compCode"></div>

// script中
  mounted() {
  // myChart 可以不用在 data 中定義，直接掛載到 this上 也可
  // 使用  this.$refs.compCode 進行初始化
    this.myChart = this.$echarts.init(this.$refs.compCode);
  },

效果圖：

image.png