当前位置：网站首页 > IT知识 > 正文

Echarts仿电梯运行图（电梯吊钩梁与电梯门平行还是垂直）

liuian 2025-01-31 14:02 43 浏览

本文适合有一定Echarts基础的人员，至少可以面向API编程。

场景

假设我们有这样一个需求：

实现一个柱状图，柱状图中间有一个小块表示电梯，柱状图本身作为建筑物。

而且电梯需要上下运行动画。

实现工具

优先选择Echarts的柱状图（Bar），当然如果你愿意也可以自己去通过canvas绘制，这个就不在我们讨论内了，快准狠才是我们的追求(doge)。

思路

1. 柱状图，没毛病

2. 查看文档，柱状图是否可以添加挂件

3. 可以，但是修改很麻烦，pass

4. 发现series的stack属性，可以叠加多个数据到一个柱子上，好像还不错

5. 就它了

开发

先尝试stack。

series中添加三个数据，8，1，6。

嗯……还行，就是这个味道。

接下来的问题就是动画的实现。

Echarts默认是有动画属性的，`option.animation`就是控制动画是否有的，默认是true，我们不去动它。

假设我们把动画时间设置成5s，那么需要把`option.animationDurationUpdate`设置成5000。这没问题，但是要注意，得再把`option.animationDuration`设置为0，否则，初始化的时候也需要5s。文档说得很清楚，animationDurationUpdate是更新数据时候的动画时长，没相当初始化也算是更新……

这样就可以有这样的效果了：

至于动画实现的原理，就是在5s后，对数据进行修改，将新数据通过setOption重新植入。

这里可以只set新数据，Echarts支持差量更新，如：

对于Echarts来说，单柱和多柱本质上没区别，而稍微有点难度的就是我们本身的数据结构对于这个效果的影响。

比如我们有一组数据，建议编码如下：

这里的floor_start为电梯运行的起始楼层，floor_end为终止楼层，而floor_count当然就是本楼的楼层了。

那么我们可以抽象出如下的算法：

这里便是柱状图从下往上的数据，很明显，中间固定为1。

所以初始化的就是这样：

而更新的就是这样：

相信到这里，大体的逻辑与实现小伙伴们应该就清楚了。