在前端數據可視化中,Echarts 是非常優秀的一個開源框架。但是在使用 Echarts 進行數據展示時,我們首先需要將數據轉換成 Echart 能夠理解的 JSON 格式。這篇文章將介紹與 Echarts 相關的 JSON 格式。
對于數據展示來講,Echarts 中最基礎的數據結構是通過普通的 JSON 對象來表述的。例如:
{ "title": { "text": "世界人口總量", "subtext": "數據來自網絡" }, "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } }, "legend": { "data": ["2011年", "2012年"] }, "xAxis": { "type": "value", "name": "人口" }, "yAxis": { "type": "category", "data": ["巴西", "印尼", "美國", "印度", "中國", "世界人口(萬)"] } }
上述代碼是一個簡單的 Echarts 餅圖所需的 JSON 數據格式,其中title、tooltip、legend等屬性均為 Echarts 內部定義的屬性。在使用 Echarts 時,開發者需要了解 Echarts 的開發文檔,以了解這些屬性的具體用途。
Echarts 不僅支持普通的 JSON 格式,還支持更加靈活的 JSON 屬性擴展語法,可以通過這種方式優化和修改 Echarts 的內部屬性。例如:
{ "tooltip": { "formatter": "{a}
{b}: {c} (ykmw4gc%)", "trigger": "item" }, "legend": { "orient": "vertical", "x": "right", "y": "center", "data": ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"] }, "series": [ { "name": "訪問來源", "type": "pie", "radius": "55%", "center": ["50%", "60%"], "data": [ {"value": 335, "name": "直接訪問"}, {"value": 310, "name": "郵件營銷"}, {"value": 234, "name": "聯盟廣告"}, {"value": 135, "name": "視頻廣告"}, {"value": 1548, "name": "搜索引擎"} ] } ] }
上述代碼是一個餅圖的 JSON 格式,其中的 "formatter" 和 "series" 等屬性均為 Echarts 屬性擴展語法中的擴展屬性。使用這種方式可以覆蓋并修改原有的 Echarts 內部定義的屬性,令 Echarts 更加靈活。
總之,Echarts 中的 JSON 格式主要由兩種方式構成,一種是普通 JSON 格式,另一種是擴展屬性語法中的 JSON 格式。開發者需要在使用 Echarts 時根據具體情況進行選擇和應用。
上一篇c 對象嵌套json
下一篇vue events使用