实现在echart饼状图上显示百分比,数据

最新推荐文章于 2025-02-24 14:42:44 发布

原创最新推荐文章于 2025-02-24 14:42:44 发布 · 2.6w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#echart #前端 #js插件

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Echart饼状图中显示百分比及数据值，通过配置series中的label参数实现，自定义显示格式为{name}

该文章已生成可运行项目，

最近业务用到了echart，用来展示分析数据挺方便的，这里做一些小笔记。

正文：

要实现在echart饼状图上显示百分比,数据，只需要添加一些属性即可(在series里添加label标签)，用法如下：

option = {
    series : [
        {
            name: '项目进度数据分析',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            label: {
                normal: {
                    show: true,
                    formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                }
            },
            data:datas   //datas在其他地方已赋值
        }
    ]
};

效果如下图：