ASP.NET Web開發 Echarts圖表空資料優化
阿新 • • 發佈:2019-02-07
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',支援外部裝載 |
顯示效果如下圖所示: