echarts饼图如何显示百分比

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

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

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

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

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

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

效果如下：

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

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

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问