echarts 圖表無數據時顯示“暫無數據”

如標題所述，我們希望 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);

_echarts_instance_ 也可以在 初始化實例的時候以 重新設置值的方式加入，其他（展示暫無數據的邏輯）不變。

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