echarts饼图，在中心显示一个固定的百分比

最新推荐文章于 2024-01-26 20:15:00 发布

Ava_16

最新推荐文章于 2024-01-26 20:15:00 发布

阅读量5k

点赞数 1

文章标签： echarts 饼图

本文链接：https://blog.csdn.net/Ava_16/article/details/107153703

版权

本文介绍如何在Echarts饼图中设置一个固定百分比展示在图表中心，详细展示了实现这一效果的代码步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下
在这里插入图片描述
贴上代码：

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    title: {
        text: '区域智能控制器',
        x:'left',
        y:'center',
        itemGap: 30,
        textStyle: {
            fontSize: 26,
            fontWeight: 'bolder',
            color: '#000080'
        },
    },
    color:['#f6da22','#bbe2e8'], 
    legend: {
        orient: 'vertical',
        data: ['直接访问', '邮件营销'],
        itemGap: 60,
        right: 50,
        y: 'center',
        itemWidth: 24,   // 设置图例图形的宽
        itemHeight: 18,
        selectedMode: false,
        formatter: "{name}"
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 5, name: '直接访问',label:{
                    normal:{ 
                        show:true,
                        formatter: '{d}%',
                         textStyle: {
                                fontSize: 36,
                                fontWeight: 'bolder',
                            },
                    }}},
                {value: 120, name: '邮件营销'}
            ]
        }
    ]
};