Echarts饼图中显示百分比

开发中遇到一个需求,要在饼图上显示数据百分比,下图:

在这里插入图片描述
查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在饼图内部inner,或者饼图外部outer,无法实现同时实现内部、外部显示。查阅文档看到说可以设置两个serie,让两个饼图完全重合即可,一个外标签显示文字说明,另一个显示内标签,实现显示百分比。

demo展示
series: [
  {
    name: "情绪占比",
    type: "pie",
    label: {
      show: true,
      // position: "putside",
      formatter: "{b} {d}%",
    },
    emphasis: null,
    labelLine: {
      show: true,
      length: 40,
    },
    data: [
      { value: 55, name: "正面", itemStyle: { color: "#ff745a" } },
      { value: 15, name: "负面", itemStyle: { color: "#2391ff" } },
      { value: 30, name: "中性", itemStyle: { color: "#ffc328" } },
    ],
  },
  {
    name: "情绪占比",
    type: "pie",
    label: {
      show: true,
      position: "inside",
      formatter: "{d}%",
    },
    labelLine: {
      show: false,
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: "bold",
      },
    },
    data: [
      { value: 55, name: "正面", itemStyle: { color: "#ff745a" } },
      { value: 15, name: "负面", itemStyle: { color: "#2391ff" } },
      { value: 30, name: "中性", itemStyle: { color: "#ffc328" } },
    ],
  },
],
效果图

在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值