1、业务需求

将数据显示在饼图内部，格式化百分比显示，鼠标放上去显示具体名称和数值

原样式如下

2、业务实现

调整代码如下，核心语句已标记注释

option = {
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [{
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [{
            value: 1048,
            name: 'Search Engine'
        },
        {
            value: 735,
            name: 'Direct'
        },
        {
            value: 580,
            name: 'Email'
        },
        {
            value: 484,
            name: 'Union Ads'
        },
        {
            value: 300,
            name: 'Video Ads'
        }],
        radius: '50%',
        center: ['50%', '50%'], // 这个属性可以调整图像的位置，左面所示为中心
        label: {
            normal: {
                show: true,
                position: 'inner', // 数值显示在内部
                formatter: '{d}%', // 格式化数值百分比输出
            },
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

更改后效果如下图所示

3）附录

ECharts 提示框组件Tooltip属性大全（包含文本注释）

以上就是ECharts 饼图数据放在饼图内部显示的介绍，做此记录，如有帮助，欢迎点赞关注收藏！