如標題所述，我們希望 echarts 圖表在沒有資料時顯示 “-暫無相關資料-” 字樣。

操作：

需要對返回的資料做判斷，如果有資料則正常顯示圖表，如果沒有資料，我們將此 div 的內容改為文字 “-暫無相關資料-”，並設定樣式即可。

HTML：

<div id="chart"></div>

JS（Vue）：

方法（一）：

// 無資料時：展示暫無資料
const dom = document.getElementById('chart');
dom.innerHTML = '-暫無相關資料-';
dom.style.cssText = 'text-align:center; color: #999; border: none;line-height: 300px';
dom.removeAttribute(
 
'_echarts_instance_');

最後一行程式碼是關鍵，如果不加的話，可能導致下次渲染失敗。

原理：

未例項化的 echarts 在例項化的過程中，會在該 div 上生成一個類似 ID 的自定義屬性 _echarts_instance_ ，然後進行後面的渲染操作。當我們重新整理已例項化的 echarts 圖表時，echarts會先匹配該 div 容器上的 _echarts_instance_ 屬性值是否與例項物件的 ID 一樣，如果一樣會在原有的結構上進行渲染。如果此時我們的頁面顯示的 “-暫無相關資料-” ，這時重新整理圖表 ID其實沒變，但是我們破壞了原有的結構，所以無法重新渲染出表格內容。

當然，除了上述寫法外，我們還可以這樣寫：

方法（二）：

// 有資料時寫入
const chart = document.getElementById('chart');
chart.setAttribute('_echarts_instance_', '');
this.chart = this.$echarts.init(chart);

上面兩種解決辦法，選擇一種使用就可以了 ~