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

简介:       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',支持外部装载

      显示效果如下图所示:




相关文章
|
3月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
3月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
115 2
|
4天前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
18 8
|
5天前
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
|
20天前
|
开发框架 JSON 前端开发
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
|
1天前
|
数据可视化
Echarts数据可视化开发| 移动效能平台附源码
Echarts数据可视化开发| 移动效能平台附源码
|
1天前
|
数据可视化
Echarts数据可视化开发| 智慧数据平台
Echarts数据可视化开发| 智慧数据平台
|
1天前
|
数据可视化
Echarts数据可视化开发| 智慧营业厅
Echarts数据可视化开发| 智慧营业厅
|
1天前
|
数据可视化
Echarts数据可视化大屏开发| 大数据分析平台
Echarts数据可视化大屏开发| 大数据分析平台
Echarts大屏开发| 智慧物流系统
Echarts大屏开发| 智慧物流系统