echarts饼图如何显示百分比

前端 潘老师 4个月前 (01-10) 125 ℃ (0) 扫码查看

要想echart饼图显示百分比,只需要设置series中的label标签相关属性即可,我们来一起看一下、

比如,我们想要在饼图label后面追加百分比的显示,可以使用如下配置:

series: [
    {
      // 其他配置省略,以下是百分比显示
      label: {
        show: true,
        formatter: '{b} ({d}%)'
      },
    }
]

其中{b}表示标签名,{d}%是该项的百分比,实现的效果类似如下图:

如果你想要将百分比显示在饼图的扇形里面,可以是用label中的position属性,position:'inside'即可,比如如下:

series: [
    {
      // 其他配置省略,以下是百分比显示
      label: {
        show: true,
        position: 'inside',
        formatter: '{d}%'
      },
    }
]

效果如下:

但这样外面的线就没了,不是特别好看,如果既要有外边的线还要将百分比显示在饼图内部,那就只能series中设置两个相同的饼图对象,只要label不一样,使其相互重叠,其他的也没什么更好的办法,如果你有更好的办法可以留言哦!

以上就是echarts饼图如何显示百分比的全部内容,希望对你有帮助哦。


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12751.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】