ECharts是一款基于JavaScript的開源可視化庫,封裝成了一個完整的圖表組件庫,提供了直觀,可交互,可定制的數據可視化展示。
在ECharts中,常用的數據傳入方式是Json格式的數據。JSON(JavaScript Object Notation)是一種輕量級的數據交互格式,基于簡單且容易讀寫的文本格式,易于人類閱讀和編寫,同時也易于機器解析和生成。關鍵在于它具備輕量性、易擴展性及可讀性。
{
"title": {
"text": "某站點用戶訪問來源",
"subtext": "純屬虛構",
"left": "center"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/> : {c} (lpt7ntt%)"
},
"legend": {
"orient": "vertical",
"left": "left",
"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": "搜索引擎"}
],
"itemStyle": {
"emphasis": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
上述代碼展示了一個常用的ECharts生成餅圖的Json格式數據。其中數據的結構非常清晰。"title"表示圖表的標題,"tooltip"表示展示數據時的提示格式,"legend"表示餅圖的右側展示信息,"series"表示此餅圖的具體數據,包括各個部分所對應的數值和名稱。通過Json格式的數據,我們可以很方便地進行ECharts圖表的展示和生成。
下一篇Vue分段加載數組