[筆記] ECharts 更改長條圖、折線圖等圖表預設的顏色

章節連結

ECharts 在使用長條圖、折線圖…等圖表時,感覺上會將生成的長條、折線隨機套入不同顏色。若你想要自定義這些顏色內容或是顯示順序的話,那就需要在產生 ECharts 時一併將設定檔給定義進去。這邊筆記下實作方法。
apache echarts logo


步驟

1. 先列出你所想要的顏色列表
2. 以折線圖為例,需要注意要同時調整「點的顏色」和「線的顏色」
3. 利用 array, object 等遍歷時的 index ,利用數學上同餘 ( mod ) 的方法來確保顏色數量不會用完

程式碼


參考資料

1. Echarts – 更改图表图例(legend)自定义颜色(并与数据段颜色对应)
2. echarts图中颜色的随机展示方法

按讚加入粉絲團

延伸閱讀