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

发布于 2022-09-12 23:14:07 字数 1838 浏览 12 评论 0

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: '营销广告'}
            ]
        }
    ]
};

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

余生一个溪 2022-09-19 23:14:07

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

悲凉≈ 2022-09-19 23:14:07

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文