天天看點

ECharts 餅圖

前面的章節我們已經學會了使用 ECharts 繪制一個簡單的柱狀圖,本章節我們将繪制餅圖。

餅圖主要是通過扇形的弧度表現不同類目的資料在總和中的占比,它的資料格式比柱狀圖更簡單,隻有一維的數值,不需要給類目。因為不在直角坐标系上,是以也不需要 xAxis,yAxis。

myChart.setOption({

series : [

{

name: '通路來源',

type: 'pie', // 設定圖表類型為餅圖

radius: '55%', // 餅圖的半徑,外半徑為可視區尺寸(容器高寬中較小一項)的 55% 長度。

data:[ // 資料數組,name 為資料項名稱,value 為資料項值

{value:235, name:'視訊廣告'},

{value:274, name:'聯盟廣告'},

{value:310, name:'郵件營銷'},

{value:335, name:'直接通路'},

{value:400, name:'搜尋引擎'}

]

}

})

我們也可以通過設定參數 roseType: 'angle' 把餅圖顯示成南丁格爾圖。

option = {

type: 'pie',

radius: '55%',

roseType: 'angle',

data:[

};

itemStyle 參數可以設定諸如陰影、透明度、顔色、邊框顔色、邊框寬度等:

],

itemStyle: {

normal: {

shadowBlur: 200,

shadowColor: 'rgba(0, 0, 0, 0.5)'