echarts在没有数据时显示暂无数据

需求描述： 如上图，若选择的日期范围内没有数据时，接口返回数据为空，此时需要在echarts dom区域内显示“暂无数据”的提示文字； 并且，若在暂无数据之后重新选择日期范围，当重新有数据时，可以正常渲染图表。

解决思路： 在 echarts 正常渲染后，会在容器 div 上面添加一个自定义的属性_echarts_instance_，比如

当某一次数据请求失败的时候，可以在 div#ec_container里面插入 一段 html 用于提示用户，比如 暂无数据，此时的 div#ec_container 变成了 暂无数据 当再次切换搜索条件，获取新的数据的时候，ajax请求成功，数据也是没问题的，但是此时 echarts 图渲染不出来，页面上面依然显示的是 “暂无数据”，此时的 div#ec_container 依然是 暂无数据 。 当把 div#ec_container 的自定义属性 echarts_instance 去掉，然后再去获取数据时，echarts 图能够正常渲染。 所以我的解决办法是：当获取数据失败，往 div#ec_container 容器中插入一段html 片段用于提示暂无数据的提示文字，然后再删除掉 div#ec_container 容器的 echarts_instance，这样问题就解决了。

参考代码如下： $("#btnSearch").click(function() { var postData = { begin_date: $(‘input#startDate’).val(), end_date: $(‘input#endDate’).val() } var btnSearchBugBar = echarts.init(document.getElementById(‘BugAmountBar’), ‘white’, {renderer: ‘canvas’}); btnSearchBugBar.showLoading({ text: “数据装填中 请稍后…”, textStyle:{ fontSize: 20 } }); $.ajax({ type: “GET”, url: “/api/collect/chandao/bugCharts”, dataType: “json”, data: postData, success: function (result) { if (Object.keys(result).length != 0) { btnSearchBugBar.hideLoading();

btnSearchBugBar.setOption( $.parseJSON(result['btn_bar'])); } else { $("#BugAmountBar").html('<div id="BugAmountBar-nodata" style="text-align: center;font-weight: bold;line-height: 140px">暂无数据...</div>'); $('#BugAmountBar').removeAttr('_echarts_instance_'); } } });

});