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

今天在开发当中遇到一个需求问题,我们使用ECharts的时候,展示饼状图默认2位小数,需要展示4位小数,在网上也没有找到比较好的案例,后来去了ECharts官网读取里面的api文档,现在把自己的代码展示出来,供大家参考,希望能帮到大家:

 

页面展示效果已经达到了,代码参照如下:

var theSer = {
   type: 'liquidFill', // 水波图
   data: [ //可以有多个水波
      {
         value: proportionList[i].bval, //所占比例 0-1
      }
   ],
   amplitude: 5, //波的振幅
   waveLength: 150, //波长
   waveAnimation: true,
    animationEasing: 0,
    animationEasingUpdate: 0,
    animationDuration: 0,
    animationDurationUpdate: 0,
   radius: 164, //水波图的半径
   center: [(i+1)*widthGap+(164/2)+i*164, '50%'], //圆心位置
   itemStyle: {
      normal: {
         color: waterColor //水波的颜色
      }
   }, //波线的阴影
   backgroundStyle: {
      color: '#fff', //背景色
      borderColor: '#fff',
      borderWidth: 1,
      shadowColor: '#ffffff',
      shadowBlur: 20
   }, //球状的背景颜色         
   outline: {
      show: true, //true显示水波图上的文字
      borderDistance: 6,
        itemStyle: {
            color: '#ffffff',
            borderColor: waterColor,
            borderWidth: 2,
            shadowBlur: 30,
            shadowColor: '#ffffff'
        }
   },
   label: {
      show: true, 
      color: '#294D99',
        insideColor: '#fff',
        fontSize: 50,
        fontWeight: 'bold',

        align: 'center',
        baseline: 'middle',
        position: 'inside',
      normal: {
         textStyle: {
            color: waterColor, //本来的颜色
            insideColor: 'white', //被淹没的颜色
            fontSize: 30
         },
                  show: true,
                  // formatter: '{c} ({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
                  // formatter: '{c}%' //自定义显示格式(b:name, c:value, d:百分比)
                  formatter: function (a, b, c) {
            console.log(a)
            // console.log(b)
            // console.log(c)
            if(a.data.value == 1){
                          return 100+"%";
            }else{
                          return parseFloat(a.data.value).toFixed(4)+"%";
            }

                  },
      },


   },


};

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值