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_ 也可以在 初始化实例的时候以 重新设置值的方式加入，其他（展示暂无数据的逻辑）不变。

上面两种方法，选择一种使用就可以了 ~