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中，设置饼图的标签位置为“中心”可以使数据更加直观，并且可以通过多种方式进行优化和定制，如调整文本样式、高亮效果，动态设置标签位置等，使图形更加美观、易懂、易用。