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_');
        }
    }
});

});

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值