前面的章節我們已經學會了使用 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)'