如何实现进度条类报表
在业务报表展示中，进度条是一种直观、高效的数据可视化方式，常用于展示完成率、占比、达成率等指标。润乾报表通过灵活的 HTML 拼接能力，支持在前端以表格单元格形式构建自定义样式进度条，满足多样化展示需求。
一、实现效果：
二、实现方法：
通过 HTML 拼接 + 单元格动态引用实现百分比进度条报表。
三、实现步骤：
1、报表设计如下：
其中，B2 是进度值单元格（我这里是模拟的数据），这里可以是固定值，也可以是数据集字段，或计算值。
2、定义进度条展示单元格
单元格右击，选择数据类型–HTML，然后输入内容为：
+ '<tr>'
+ '<td style="background-color:green;border-radius:10px;width:' + B2 + '%;"></td>'
+ '<td valign="middle" style="width:' + (100-B2) + '%;">' + B2 + '%</td>'
+'</tr></table>'
| 代码片段 | 含义 |
|---|---|
| height=‘100%’ width=‘100%’ | 进度条铺满所在单元格宽高 |
| cellpadding=‘0’ cellspacing=‘0’ | 清除单元格内、外间距，实现无缝进度条 |
| background-color:green | 进度块背景色 |
| width:‘+ B2 +’%’ | 动态引用 B2 值作为进度宽度 |
| valign=‘middle’ | 百分比文字垂直居中 |
| +(100-B2)+‘%’ | 右侧文字区域自适应剩余宽度 |
| border-radius | 圆角效果 |
3、保存报表，发布查看预览效果
示例报表下载：
最后，HTML 的方式是在一个单元格里展现某个项目的进度，如果想要统一展现多个项目的进展对比，也可以使用统计图—条形图来实现。
