Echarts是一款非常強大的數據可視化工具,在使用Echarts時,最為基礎的一個要素就是數據。Echarts所接受的數據格式主要有兩種,一種是JSON格式的數據,另一種是數組格式的數據。在本文中,我們將重點介紹如何使用JSON格式的數據來進行Echarts的數據可視化。
首先,我們來看一下簡單的Echarts JSON格式數據:
{ "title": { "text": "某站點用戶訪問來源", "subtext": "純屬虛構", "x": "center" }, "tooltip": { "trigger": "item", "formatter": "{a}
: {c} (rptz5vx%)" }, "legend": { "orient": "vertical", "left": "left", "data": ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"] }, "series": [{ "name": "訪問來源", "type": "pie", "radius": ["50%", "70%"], "avoidLabelOverlap": false, "label": { "normal": { "show": false, "position": "center" }, "emphasis": { "show": true, "textStyle": { "fontSize": "30", "fontWeight": "bold" } } }, "labelLine": { "normal": { "show": false } }, "data": [{ "value": 335, "name": "直接訪問" }, { "value": 310, "name": "郵件營銷" }, { "value": 234, "name": "聯盟廣告" }, { "value": 135, "name": "視頻廣告" }, { "value": 1548, "name": "搜索引擎" } ] }] }
可以看到,Echarts的JSON格式數據主要由四個部分組成:title、tooltip、legend和series。其中,title用于設置標題,tooltip用于設置提示框,legend用于配置圖例,series則用于配置數據系列。在series中,我們可以設置多個數據系列,來實現不同類型的數據展示,比如折線圖、散點圖、餅圖等。
需要注意的是,JSON格式數據的書寫必須符合嚴格的JSON語法規則,包括使用雙引號作為key值的標識符、數值之間的逗號分隔、花括號和方括號的使用等。否則,Echarts將無法正確解析數據。
上一篇vue刪除接口調用