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)'
                }
            }
        }
    ]
};

嘗試一下 »

本文地址：https://www.linuxprobe.com/echarts-pie-chart.html編