ASP.NET Web开发 Echarts图表空数据优化

      1、问题提出

      在Web开发中,使用Echarts百度图表控件显示折线图、饼图等时,如果从数据库取出的是空数据,默认显示的是动态气泡图,看起来很凌乱,用户体验不好,那么我们如何修改呢?


      2、问题解决

      在初始化图表时,增加noDataLoadingOption属性配置,代码如下所示:

      myChart = echarts.init(document.getElementById('ElectricPie'), {
                noDataLoadingOption: {
                    text: "暂无数据",
                    effect: 'whirling',  //'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
                    effectOption: {
                        backgroundColor: "#fff"
                    },
                    textStyle: {
                        fontSize: 20
                    }
                }
            });

      effect属性的可选项如下所示:

{string | Function} effect'bubble'loading效果,可选为:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble',支持外部装载

      显示效果如下图所示:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值