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

      顯示效果如下圖所示：