欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-15 12:48:46
1、问题提出 在Web开发中,使用Echarts百度图表控件显示折线图、饼图等时,如果从数据库取出的是空数据,默认显示的是动态气泡图,看起来很凌乱,用户体验不好,那么我们如何修改...

1、问题提出

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

ASP.NET 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 Web开发 Echarts图表空数据优化分析