echarts餅圖標籤位置設置詳解

一、設置標籤位置為「中心」的實現方法

1、設置label的position屬性為’inner’

2、設置labelLine的show屬性為false

3、設置label的formatter屬性，自定義標籤內容

option = {
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                position: 'inner',
                formatter: '{d}%'
            },
            labelLine: {
                show: false
            }
        }
    ]
};

二、對「中心」位置標籤的優化

1、設置文本樣式，使標籤更易於閱讀

2、設置滑鼠懸停時的高亮效果，提高用戶體驗

3、設置數字單位（千位、百位、小數點等）

4、調整顏色及餅圖外觀

option = {
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ],
            label: {
                position: 'inner',
                formatter: '{b}:{d}%',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#fff'
                }
            },
            emphasis: {
                label: {
                    show: true,
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                show: false
            }
        }
    ],
    color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
    tooltip: {
        formatter: '{b}: {c} ({d}%)'
    }
};

三、通過數據驅動的方式動態設置標籤位置

1、根據數據大小，自動設置標籤位置（大數值在外層，小數值在內層）

2、設置最小餅圖尺寸和標籤位置

3、使用zlevel屬性設置標籤層級

option = {
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius : [20, 110],
            center : ['50%', '50%'],
            roseType : 'radius',
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ],
            minShowLabelAngle: 20,
            label: {
                formatter: '{b}:{c}({d}%)',
                position: function(value, params) {
                    var angle = params.startAngle + (params.endAngle - params.startAngle) / 2;
                    var x = Math.cos(angle * Math.PI / 180) * params.r * 0.5;
                    var y = Math.sin(angle * Math.PI / 180) * params.r * 0.5;
                    return [x, y];
                },
                fontSize: 16,
                color: '#000',
                align: 'center',
                verticalAlign: 'middle',
                rich: {
                    a: {
                        color: '#999',
                        lineHeight: 20,
                        align: 'center'
                    },
                    b: {
                        fontSize: 16,
                        lineHeight: 32
                    }
                }
            },
            zlevel: 8
        }
    ],
    color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a']
};

四、總結

在echarts中，設置餅圖的標籤位置為「中心」可以使數據更加直觀，並且可以通過多種方式進行優化和定製，如調整文本樣式、高亮效果，動態設置標籤位置等，使圖形更加美觀、易懂、易用。