echarts饼图在不改变标签的前提下怎么在扇图里面加文字?

image

`option = {

title: {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    left: 'center'
},
tooltip: {
    trigger: 'item'
},
legend: {
    orient: 'vertical',
    left: 'left',
},
series: [
    {
        
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 1048, name: '搜索引擎'},
            {value: 735, name: '直接访问'},
            {value: 580, name: '邮件营销'},
            {value: 484, name: '联盟广告'},
            {value: 300, name: '视频广告'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

};`

贴个答案:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        data: ['直达', '营销广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: ['0%', '30%'],
            label: {
                position: 'inner',

            },
            labelLine: {
                show: true
            },
            data: [
                {value: 1548, name: '搜索引擎'},
                {value: 775, name: '直达'},
                {value: 679, name: '营销广告'}
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '30%'],
            labelLine: {
                length: 30,
            },
            data: [
                {value: 1548, name: '搜索引擎'},
                {value: 775, name: '直达'},
                {value: 679, name: '营销广告'}
            ]
        }
    ]
};
阅读 2.8k
2 个回答

用嵌套环形图模拟下,里面是饼图尽量撑满外面套一个环形图,2个部分的数据与颜色保持一致,然后自定义内部饼图的标签就可以了。

恰好最近也在研究类似的问题。
ECharts 提供了渲染自定义图形的配置项series.custom.renderItem,自定义一系列。
不过我还没研究透这个配置项的renderItem函数怎么写,尤其是如何设置相对图表的位置,可以参考下这篇

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题