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 = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件行銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
]
}
]
};
陰影的配置
itemStyle 參數可以設置諸如陰影、透明度、顏色、邊框顏色、邊框寬度等：
實例
option = {
series : [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件行銷'},
{value:335, name:'直接訪問'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};