如何实现进度条类报表？

在业务报表展示中，进度条是一种直观、高效的数据可视化方式，常用于展示完成率、占比、达成率等指标。实现这种需求可能最多想到的就是条形图，但是条形图适用于把所有数据放到一个图里展示；如需展示单一指标的完成比例，硕迪可通过灵活的 HTML 拼接能力，在前端以单元格形式构建自定义样式进度条，来满足多样化展示需求。
先看下两种图效果的区别：
条形图设置对应的分类和系列即可，此次着重介绍下 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>'
  3、保存报表，发布查看预览效果
  最后，HTML 的方式是在一个单元格里展现某个项目的进度，如果想要统一展现多个项目的进展对比，也可以使用统计图—条形图来实现。