echarts 叠状条形图, Y轴显示百分比, 每一个之上显示总数

  以前群里的小伙伴他们公司的一个需求, Y轴显示百分比, 每条柱子上都有总数

  以前使用 echarts 主要就是去官网扒个实例, 改下数据, 深刻点的也只是才接触哈, 百度了数次才勉强作出来.

  其中遇到了几个问题, 好比, option.series.data 的数据, 应该怎么传, 以前一维数组就能知足工做需求, 也没有深刻研究过, 这个须要须要二位数组, 每一个数组的第一个元素的值对于的是 X 轴, 第二个数值, 若是是 数据(不是百分比)的话, Y 轴作不到显示百分比(至少我作不到), 也就是说, 这个数组须要三个元素, 第一个元素对应 X 轴, 第二个元素是百分比, 第三个元素是数值.

  这个数据结构就遇到了一个问题, tooltip 显示的是第二个值, 但是需求是显示具体数值, 经过百度和文档找到了一个解决方法, tooltip.formatter 给它赋值个方法, 它获取的参数是包含了当前柱子上全部数据, 由于我这个是叠状图, 它是个数组, 别的我没试过, 因此经过拼串的方式来动态显示数据, 虽然不优雅, 不过总算实现了效果.

  每一个之上显示总数, 只须要给 option.series 多添加一个数组, data 中的元素都为 0 便可, 这样就不会又高度, 在给 label.normal.formatter 赋值一个方法, 它接收的参数中有当前 X 轴的索引, 经过循环动态计算总数.

  由于我能力有限, 其中还有不少不完美的地方, 好比, 我想经过父元素输入 name 和 周一至周日的数据, 就能动态改变图形, 这时候就须要计算天天所占当天的比例, 但是我只会双重循环, 求大佬指点怎么才能优化.

代码地址: github.com/mingju0421/…

第一次写😥