echarts饼图如何修改百分比位数

今天工作中要求echarts生成的饼图需要显示百分比并保留一位小数,在echarts的series.lable.formatter中可以设置该属性。

值得注意的是 自带的{d}%默认保留两位小数,如需修改小数位数,需要自己写一个函数。

<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title : {
        text: '住院医疗品质',
        //2.重大疾病医疗、
        //3.癌症医疗、
        //4.意外伤残医疗
        //------------------
        //xx先生养老需求、xx女士养老需求(环形)
        // subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        // trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        left: 'right',
        // 图例名字和数据的名字一定要一致,鼠标悬停图例和单击图例有功能
        data: ['已购买日额型险种','缺口金额']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : ['50%', 0],
            // 水平位置,垂直位置
            // center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                   
 formatter:function(data){ return data.percent.toFixed(1)+"%";} 

使用这段代码后,效果如下图所示。特此记录。



  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
要在echarts饼图中显示数据的百分比,可以使用tooltip的formatter属性。根据官方文档,可以通过设置formatter属性为"{a} <br/>{b}: {c} ({d}%)"来实现。其中,{a}代表series的名称,{b}代表数据项的名称,{c}代表数据项的值,{d}代表数据项的百分比。这样设置后,当鼠标悬停在数据项上时,会以提示框的形式显示出数据项的名称、数值和百分比。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [《前端》Echarts 饼图--设置显示文字、数据、百分比等--2020年8月10日](https://blog.csdn.net/bellediao/article/details/107921495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [echarts 圆环图 中间显示数据 下边显示标题](https://download.csdn.net/download/weixin_38661650/14038109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [echarts饼图显示百分比](https://blog.csdn.net/L_WalkingPig/article/details/109054638)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值