如何将小数以进度条百分比显示

问题遇到的现象和发生背景

如何将上述图片中 cup 的占用率 的以 百分比进度条 显示
我这边用的是 ** jqGrid**

问题相关代码，请勿粘贴截图

$(function () {
    $("#jqGrid").jqGrid({
        url: '../serverinforecord/list',
        datatype: "json",
        colModel: [            
            { label: 'id', name: 'id', index: 'id', width: 50, key: true, hidden: true },
            { label: '服务器ip', name: 'serverId', index: 'server_id', width: 80 },
            { label: 'cpu总量', name: 'cpuQuantity', index: 'cpu_quantity', width: 80 ,formatter: cpuFormat},
            { label: 'cpu核数', name: 'cpuNum', index: 'cpu_num', width: 80 },
            { label: 'cpu使用值', name: 'cpuValue', index: 'cpu_value', width: 80 ,formatter: cpuFormat},
            { label: 'cpu占用率', name: 'cpuProportion', index: 'cpu_proportion', width: 80 ,formatter: cpu},
            { label: 'cpu空闲率', name: 'cpuFreeRate', index: 'cpu_free_rate', width: 80 },
            { label: 'cpu等待率', name: 'cpuWaitRate', index: 'cpu_wait_rate', width: 80 },
            { label: '记录时间', name: 'recordTime', index: 'record_time', width: 80 }
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
    function cpuFormat(cellvalue, options, rowObject) {
        if (cellvalue==""||typeof(cellvalue) == "undefined"){
            return "";
        }else{
            return cellvalue + "MHz";
        }
    };
    function cpu(r) {
        console.log(r);
        return r;
    }
});

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

1. 自己写一个样式

   function cpu(r) {
        let str=Number(r*100).toFixed(2);
        return '<div class="progress">'
                    +'<di v class="progress-bar" style="width: '+ str+'%">'
                      +'<span class="progress-bar-text">'+ str+'%</span>'
                    +'</div>'
                  +'</div>'
    }
   

            .progress {
                height: 18px;
            line-height: 18px;
                position: relative;
                border-radius: 20px;
                background-color: #eee;
            }
            .progress .progress-bar {
                height: 18px;
            line-height: 18px;
                background-color: #009688;
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                max-width: 100%;
                border-radius: 20px;
                text-align: right;
                transition: all .3s;
                -webkit-transition: all .3s;
            }
            .progress .progress-bar .progress-bar-text {
                color: #fff;
                padding: 0 10px;
            }
   

2. 用layui-progress，因为表格异步加载，没有触发layui的进度条渲染，需要在jqgrid加载完成loadComplete时调用layui的渲染事件

   layui.use('element', function(){
   var element = layui.element;
   $("#jqGrid").jqGrid({
    // ... 
    loadComplete: function() {
      element.render()
    }
   })
   })
   

*100加个%不可以吗

那你需要 一个进度条 的 组件 ，传进去 百分比的值 。或者你自己封装一个 组件 。 你现在 是 小数 值 ，那你 乘以 100% 就好了（0.035那就是 0.035*100 再加上 % ，3.5%）。

可以自己封装，也可以用ui库 。一般 ui库 都有带的

后台给你返回的值就是百分比的把，直接使用element-ui 的 Progress 进度条组件

<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>

按照图上的显示 大概分为两部分 第一个是百分比数的展示，第二个是后面ui进度条的展示
百分比数的展示 你可以乘100,然后拼接一个百分号就可以了
ui展示 你写一个div当做背景 里面在写一个div当做进度，里面的div宽度根据你cpu百分比展示即可

你看下这个有没有渲染出来

 
function cpu(r) {
        console.log(r);
        let str=Number(r*100).toFixed(2);
        return '<div class="layui-progress layui-progress-big" lay-showpercent="true"><div class="layui-progress-bar layui-bg-blue" lay-percent="'+ str +'%"></div></div><br>'
    }