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'，支持外部装载

显示效果如下图所示：