ECharts 餅圖繪製教程

導讀	ECharts 是一個使用 JavaScript 實現的開源視覺化庫，涵蓋各行業圖表，滿足各種需求。ECharts 遵循 Apache-2.0 開源協議，免費商用。

餅圖主要是通過扇形的弧度表現不同類目的資料在總和中的佔比，它的資料格式比柱狀圖更簡單，只有一維的數值，不需要給類目。因為不在直角座標系上，所以也不需要 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)'
                }
            }
        }
    ]
};

原文來自：