1. 程式人生 > >ASP.NET Web開發 Echarts圖表空資料優化

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',支援外部裝載

      顯示效果如下圖所示: