Echarts餅圖全面解析

一、Echarts餅圖顯示百分比

Echarts餅圖中顯示每個餅圖數據佔比是必不可少的，可以通過配置formatter實現在餅圖上顯示數據的百分比。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                formatter: '{b}:{d}%'
            }
        }
    ]
};

二、Echarts餅圖標籤布局

Echarts餅圖中，label布局有兩種：兩端對齊和居中對齊。兩端對齊可以通過設置align配置項來實現，而居中對齊則通過設置position來實現。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                formatter: '{b}:{d}%',
                align: 'left', // 兩端對齊
                // position: 'center' // 居中對齊
            }
        }
    ]
};

三、Echarts餅圖圓角

Echarts餅圖中，可以通過設置圓角半徑實現餅圖的圓角效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                borderRadius: 10 // 圓角半徑
            }
        }
    ]
};

四、Echarts餅圖位置調整

Echarts餅圖中，可以通過設置center和radius屬性調整餅圖的位置和大小。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            center: ['50%', '50%'], // 餅圖中心位置
            radius: ['50%', '70%'] // 餅圖半徑
        }
    ]
};

五、Echarts餅圖位置設置

Echarts餅圖中，可以通過設置position和offset屬性調整餅圖的位置。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            label: {
                position: 'inner', // label位置：在內部
                offset: [-10, 10] // label的偏移值
            }
        }
    ]
};

六、Echarts餅圖引導線

Echarts餅圖中，可以通過設置labelLine實現引導線的效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            labelLine: {
                length: 30, // 引導線長度
                smooth: true // 引導線是否平滑
            }
        }
    ]
};

七、Echarts餅圖間隙

Echarts餅圖中，可以通過設置roseType和roseType屬性實現餅圖的間隙效果。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            roseType: 'angle', // 多個餅圖之間有間隙，稱為扇形圖
            // roseType: 'radius', // 多個餅圖之間沒有間隙，稱為玫瑰圖
            itemStyle: {
                borderRadius: 10 // 圓角半徑
            }
        }
    ]
};

八、Echarts餅圖中間文字

Echarts餅圖中，可以通過設置graphcText.position，為餅圖添加中間文字（類似於”總數”，「總計」等）。

option = {
    series : [
        {
            type: 'pie',
            data:[
                ...
            ],
            graphic: {
                type: "text",
                left: "center",
                top: "center",
                style: {
                    text: '總計',
                    fontWeight: 'bold',
                    fontSize: 20
                }
            }
        }
    ]
};

九、Echarts餅圖legend選擇

Echarts餅圖中，可以通過設置legend.data屬性來選擇展示哪些數據項。

option = {
    legend: {
        data:['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    series : [
        {
            type: 'pie',
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};