之前群里的小伙伴他们公司的一个需求, Y轴显示百分比, 每条柱子上都有总数
之前使用 echarts 主要就是去官网扒个实例, 改下数据, 深入点的也只是才接触哈, 百度了数次才勉强做出来.
其中遇到了几个问题, 比如, option.series.data 的数据, 应该怎么传, 之前一维数组就能满足工作需求, 也没有深入研究过, 这个需要需要二位数组, 每个数组的第一个元素的值对于的是 X 轴, 第二个数值, 如果是 数据(不是百分比)的话, Y 轴做不到显示百分比(至少我做不到), 也就是说, 这个数组需要三个元素, 第一个元素对应 X 轴, 第二个元素是百分比, 第三个元素是数值.
这个数据结构就遇到了一个问题, tooltip 显示的是第二个值, 可是需求是显示具体数值, 通过百度和文档找到了一个解决方法, tooltip.formatter 给它赋值个方法, 它获取的参数是包含了当前柱子上所有数据, 因为我这个是叠状图, 它是个数组, 别的我没试过, 所以通过拼串的方式来动态显示数据, 虽然不优雅, 不过总算实现了效果.
每个之上显示总数, 只需要给 option.series 多添加一个数组, data 中的元素都为 0 即可, 这样就不会又高度, 在给 label.normal.formatter 赋值一个方法, 它接收的参数中有当前 X 轴的索引, 通过循环动态计算总数.
因为我能力有限, 其中还有很多不完美的地方, 比如, 我想通过父元素输入 name 和 周一至周日的数据, 就能动态改变图形, 这时候就需要计算每天所占当天的比例, 可是我只会双重循环, 求大佬指点怎么才能优化.
代码地址: github.com/mingju0421/…
第一次写😥
