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

      顯示效果如下圖所示：