项目上有个特殊的需求，需要做出echarts横向柱子，柱子上边有个小人随着柱子的百分比移动，柱子右边显示百分比，柱子左边显示标签值，实现的效果如下图：
横向柱子实现思路：
整个页面的效果图如下：
实现思路：
整个横向柱子以一个div包着，将这个div分成3个区域:左、中、右；
左边分成上下2个div ；分别填充label标签，也就是每根柱子的说明
中间也是分成上下2部分，上边代表实际柱子，下边代表计划柱子；重点是上下每个div每根柱子实际上是有两跟柱子，一根用来给显示进度和颜色，一根用来做小人的展示，只不过柱子隐藏了
右边分成上下2个div ,用来展示柱子的进度值；
这样做的方式解决了echarts柱子只能随身携带有一个标签的局限。由于echarts柱子代码较多，此处显示冗余，如果有需求并且你能够看得上眼的同行可以联系楼主（QQ:870488643），说不准能够帮上点小忙，下一篇会以css3+div+js的方式实现另一种特殊的横向柱子
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
