原文链接: juejin.cn/post/735088…

转载请注明来源

背景

产品经理: 给我画一个柱状图, 能展示一个月里每天的销售数据, 但是一个月天数太多了, 我想能选我看哪几天

我: 这不简单, 一个时间段表单组件+柱状图不就实现了么😏

产品经理: 你看看ECharts官网上这个示例的效果挺好的, 能直接在横坐标上选时间段, 鼠标一拉就行, 交互比时间段选择器不知道高到哪里去了, 而且动画够丝滑, 用户(老板)一定喜欢😘

我: 行, 我回去试试吧🤨

几天后...

(实现方式: 配置下ECharts的 dataZoom 配置项)

我: 怎么样, 这个效果还可以? 😎

产品经理: 嗯不错, 交互确实丝滑, 但是横坐标怎么显示不全?🤔

我: 老大, 字太多显示不下了啊, 要是都显示出来就重叠了看不清😅

产品经理: 这样啊, 那柱状图上的数字能和横坐标同步展示么, 这样能把日期和数据对应上好有个参考, 而且也更协调一点😘

我: 行, 我回去试试吧🤨 (内心OS: 又提刁钻需求增加开发难度🤯)

实现思路

翻了一下dataZoom的文档, 没有现成的配置项🤔

那能不能自己控制柱状图上数据的显示呢, 我查了下文档, 标签内容格式器series-bar.label.formatter这个配置项可以控制标签的显示格式, 支持字符串模板和回调函数两种形式, 那就好办了, 我只要再拿到横坐标的展示情况就可以了😁

那如何拿到横坐标的展示情况呢, 我又查了下文档, datazoom事件可以监听横坐标缩放, getOption可以拿到图表的状态数据, 但是翻了个底掉也没看到横坐标的展示情况相关的属性🤔

不过在翻文档的时候看到了setOption的介绍里赫然写着 万能接口 四个大字

我心想, 这不就ECharts绘制图表用的api么, 敢说自己是万能接口

文档里setOption的功能可以总结为以下几点

emmm, 文档说的好像有点道理, 利用setOption确实是想改啥都行

诶, 那我是不能自己控制横坐标和标签的显隐? 只要他俩显示的时机一样不就能实现了需求了么🤔

根据上面几个api, 整理下解决问题的思路:

但是...横坐标的显隐怎么控制

翻了下文档, xAxis.axisLabel怎么没有formatter😧

好在天无绝人之路, 仔细翻了一遍文档发现有一个配置项yAxis.axisLabel.interval, 可以强制设置坐标轴分割间隔, 看下效果:

懂了, interval是几, 横坐标就隔几个显示

研究了一下ECharts默认的效果(用标签不重叠的策略间隔显示标签), 应该是用interval控制的标签展示, 而且会根据展示数据的数量动态调整interval的值, 但是会保证展示的标签数量不超过某个值, 以保证标签不重叠(可以拖动下面的图表自己试试~)

那我是不也可以用自己的代码实现这个效果, 这样我就能确切的知道哪个标签展示, 然后控制对应的数据值同步展示😄

......此处省略两个小时......

经过不懈努力, 终于实现了预期效果🥳

看下最后效果: (还有好多的实现细节就不展开了, 感兴趣的话可以读下代码, 关键代码我都加了注释~)

文章里的实现方式不一定是最佳实践, 可能还有一些更优雅的实现方式, 如果有更好的解决方案可以评论区讨论~

通过这个案例可以了解到ECharts强大的灵活性:

最后分享一句话

不要慌, 不要慌, 太阳下山有月光, 月亮落下有朝阳

希望大家遇到难以实现的需求时都能迎刃而解~

原文链接: juejin.cn/post/735088…

转载请注明来源