ASP.NET Web开发 Echarts图表空数据优化分析
程序员文章站
2022-04-15 12:48:46
1、问题提出
在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',支持外部装载
显示效果如下图所示:
上一篇: ASP.NET MVC controller 之间传JS值
下一篇: Response对象5