echarts繪圖庫是一款非常強大的JavaScript圖形庫,它提供了多種圖形類型和豐富的配置選項。其中,傳入echarts中的數據格式通常是以json格式展示。
json格式是一種輕量級的數據交換格式,它使用簡單易懂的數據屬性和值對構成,通常被應用于前端交互數據格式的定義。下面我們以echarts中的json數據格式為例,來介紹一下json數據格式的使用。
{ "title": { "text": "某站點用戶訪問來源", "subtext": "純屬虛構", "left": "center" }, "tooltip": { "trigger": "item", "formatter": "{a}
{b} : {c} (ecsaama%)" }, "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)" } } } ] }
如上所示,這段json數據代碼用于繪制一個餅圖,包含了標題、提示框、圖例和數據系列等多個屬性。在echarts中,我們通過直接將json數據傳入echarts實例中的setOption方法中,即可完成繪圖。
通過上述例子,我們可以看出json數據格式的特點是:使用簡單易懂的名值對來表達數據信息,適合于前端交互數據格式定義。同時,json數據格式也經常被多個框架及后端接口所采用,成為了一種通用的數據格式。