因為頁面中要用echarts圖表的地方比較多，所以封裝了元件，方便複用，如圖：

我需要這樣一個餅圖，並且接下來在很多次地方要用到。

直接複製官網的程式碼，再改改資料，需要用的時候直接拿來用。

但是接下來出現了一個問題：如果我在同一個頁面多次使用這個元件，圖表將不能正常顯示。分析了一下， echarts通過id獲取物件

// 基於準備好的dom，初始化echarts例項

var myChart = echarts.init(document.getElementById('main'));

當封裝為元件使用的時候，id固定，同一個頁面多次出現相同id，所以不能正常顯示。

所以想出來以下解決方案：

舉個栗子，如果我需要在一個頁面中使用該元件兩次，

在元件的data中，另外賦一個變數，暫且定為type。在父元件的data中，第一個圖示的資料pieData1中新增一個type:1，第二個新增一個type:2

 pieData1:{
 type: 1,title: '失敗次數',list:[
  {value:335,name:'502 Bad Gateway'},{value:310,name:'404 Not Found'},{value:234,name:'無法連線伺服器'},{value:135,name:'請求超時'},{value:1548,name:'Trace LOSS'},],pieStyle: {
  width: '400px',height: '400px',float: 'right'
 }
 },pieData2:{
 type: 2,float: 'right'
 }
 }

接下來改需要在同一個vue頁面中用兩次的子元件：

html:

<div id="demo1" :style="pieStyle" v-if="pieData.type==1"></div>

<div id="demo2" :style="pieStyle" v-if="pieData.type==2"></div>

js：

var myPie 
 if(this.pieData.type==1){
 myPie = echarts.init(document.getElementById("demo1"));
 }else if(this.pieData.type==2){
 myPie = echarts.init(document.getElementById("demo2"));
 }

好了，問題解決了，效果圖如下：

如果想到其它方法再補充。

補充知識：vue中，封裝的Echart元件被同一個頁面多次呼叫，資料被覆蓋問題解決辦法。

大概率是echarts init有問題，是不是用class或id選擇器選擇元素來init了

錯誤版本：

正確版本：

以上這篇解決vue一個頁面中複用同一個echarts元件的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。