uniapp横向堆叠柱状图的实现(H5+CSS)

        小程序项目中有个页面,需要展示横向堆叠柱状图,到插件市场找了一圈,只看到几种charts插件,而且只有纵向堆叠柱状图和横向柱状图的demo,没看到横向堆叠柱状图的实现方案。只能自己来写了,下面是效果预览。

uniapp横向堆叠柱状图的实现(H5+CSS)_第1张图片

完整代码如下:





核心代码是,意思是根据当前子项的数值与最大总数的比值来绘制子项图形width。

你可能感兴趣的:(uni-app)