avue-data-display 数据展示保留小数点

本文链接：https://blog.youkuaiyun.com/lMasterSparkl/article/details/111185116

背景

使用avue数据展示空间avue-data-display 时发现传入9980 前端进行/100后进行展示进行了四舍五入并且没有保留小数需要进行优化

踩坑情况

1. 设置decimals参数

通过这个参数设置会导致所有数据都会保留小数有些情况展示不合理，比如：单位个的时候也会展示小数
decimals:1,

2. 赋值时进行保留小数位处理

2.1

data.sumIncome/100

2.2

data.sumIncome/100.0

2.3

(data.sumIncome/100.0).toFixed(2)

2.4

(data.sumIncome/100.0).toFixed(2)+“0”

2.5

(data.sumIncome/100.0).toFixed(2)+""

2.6 莫名可以展示

(data.sumIncome/100.0).toFixed(2)+“a”
在这里插入图片描述

解决方案

暂时没解决先记录下
目前发现需要关闭动画操作

        platformOption: {
          span: 6,
          animation:false,
          data: [
            {
              title: '当前余额',
              count: 0
            }
          ]
        },

即可正常显示字符串

可能为官方bug

期间还出现过一个bug data数组传入多个字符串对象，animation为默认值
显示的结果第一个为默认值，剩下的字符串可以正常显示

        option: {
          span: 6,
          // animation:false,
          data: [
            {
              title: '当前余额',
              count: 6
            }
          ]
        },



let tempData=[];
        tempData.push( {
          title: '当前余额',
          count: (response.data.data.income/100.0).toFixed(2)+"元"
        },
          {
            title: '当前余额',
            count: (response.data.data.income/100.0).toFixed(2)+"元"
          },
        {
          title: '当前余额',
            count: (response.data.data.income/100.0).toFixed(2)+"元"
        }

        )
        this.option.data=tempData;

显示效果如下图
在这里插入图片描述