Echart 餅圖可以非常方便地展示和分析數據占比,而這些數據通常是用 JSON 格式表示的。下面是一個示例 JSON 數據,以及如何在 Echart 中使用它來繪制餅圖。
{ "legend": { "data": ["類別1", "類別2", "類別3"] }, "series": [ { "name": "數據名稱", "type": "pie", "radius": "55%", "center": ["50%", "50%"], "data": [ {"value": 335, "name": "類別1"}, {"value": 310, "name": "類別2"}, {"value": 234, "name": "類別3"} ], "itemStyle": { "emphasis": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": "rgba(0, 0, 0, 0.5)" } } } ] }
上面的 JSON 數據包含了一個餅圖所需的所有信息:
- legend - 圖例數據,用于顯示每個數據點的標簽
- series - 數據系列,用于指定各個數據點的值和名稱,以及餅圖的樣式
- name - 數據系列的名稱
- type - 指定數據系列為餅圖
- radius - 指定餅圖的半徑大小
- center - 指定餅圖的中心位置,一般為屏幕的中心
- data - 指定各個數據點的值和名稱
- itemStyle - 指定數據點的樣式,例如陰影效果等
在 Echart 中使用上述 JSON 數據非常簡單,只需要將數據傳遞給 Echart 對象的 setOption() 方法即可:
var chart = echarts.init(document.getElementById('chart')); var option = { // 上面的 JSON 數據 }; chart.setOption(option);
上面的代碼假定頁面中已經有一個 id 為 “chart” 的元素,用于顯示餅圖。
上一篇vue兼容不了ios
下一篇vue esinit