Echarts是一款強大的可視化庫,通過它的堆疊圖可以更清晰地呈現數據的分層情況。堆疊圖中數據會堆疊在一起,按照類別分區顯示,同時又能對類別內的數據進行比較。
{ "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } }, "legend": { "data": [ "類別1", "類別2", "類別3" ] }, "grid": { "left": "3%", "right": "4%", "bottom": "3%", "containLabel": true }, "xAxis": [ { "type": "category", "data": [ "2010", "2011", "2012", "2013", "2014", "2015", "2016" ] } ], "yAxis": [ { "type": "value" } ], "series": [ { "name": "類別1", "type": "bar", "stack": "總量", "data": [ "320", "332", "301", "334", "390", "330", "320" ] }, { "name": "類別2", "type": "bar", "stack": "總量", "data": [ "120", "132", "101", "134", "90", "230", "210" ] }, { "name": "類別3", "type": "bar", "stack": "總量", "data": [ "220", "182", "191", "234", "290", "330", "310" ] } ] }
在代碼中,我們可以看到數據的格式是以json形式呈現的。其中 x軸 是以年份為標識,y軸 是以數據量為標識,每個數據類別 以及對應的數據量則分別體現在了series中的name和data屬性中。通過這種方式,我們可以更加清晰地呈現出圖表中的數據分層情況。
上一篇vue列表頁換頁