百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

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


本文适合有一定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。

所以初始化的就是这样：



而更新的就是这样：

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

演示与源码

「链接」这个是带有动画是否需要做的情况，比如一些电梯是停止的情况。

相关推荐

Optional是个好东西，如果用错了就太可惜了

原文出处：https://xie.infoq.cn/article/e3d1f0f4f095397c44812a5be我们都知道，在Java8新增了一个类-Optional，主要是用来解决程...

IDEA建议:不要在字段上使用@Autowire了!

在使用IDEA写Spring相关的项目的时候，在字段上使用@Autowired注解时，总是会有一个波浪线提示：Fieldinjectionisnotrecommended.纳尼？我天天用，咋...

Spring源码|Spring实例Bean的方法

Spring实例Bean的方法，在AbstractAutowireCapableBeanFactory中的protectedBeanWrappercreateBeanInstance(String...

Spring技巧:深入研究Java 14和SpringBoot

在本期文章中，我们将介绍Java14中的新特性及其在构建基于SpringBoot的应用程序中的应用。开始，我们需要使用Java的最新版本，也是最棒的版本，Java14，它现在还没有发布。预计将于2...

Java开发200+个学习知识路线-史上最全(框架篇)

1.Spring框架深入SpringIOC容器：BeanFactory与ApplicationContextBean生命周期：实例化、属性填充、初始化、销毁依赖注入方式：构造器注入、Setter注...

年末将至，Java 开发者必须了解的 15 个Java 顶级开源项目

专注于Java领域优质技术，欢迎关注作者：SnailClimbStar的数量统计于2019-12-29。1.JavaGuideGuide哥大三开始维护的，目前算是纯Java类型项目中Sta...

字节跨平台框架 Lynx 开源:一个 Web 开发者的原生体验

最近各大厂都在开源自己的跨平台框架，前脚腾讯刚宣布计划四月开源基于Kotlin的跨平台框架「Kuikly」，后脚字节跳动旧开源了他们的跨平台框架「Lynx」，如果说Kuikly是一个面向...

我要狠狠的反驳“公司禁止使用Lombok”的观点

经常在其它各个地方在说公司禁止使用Lombok，我一直不明白为什么不让用，今天看到一篇文章列举了一下“缺点”，这里我只想狠狠地反驳，看到列举的理由我竟无言以对。原文如下：下面，结合我自己使用Lomb...

SpringBoot Lombok使用详解:从入门到精通(注解最全)

一、Lombok概述与基础使用1.1Lombok是什么Lombok是一个Java库，它通过注解的方式自动生成Java代码（如getter、setter、toString等），从而减少样板代码的编写，...

Java 8之后的那些新特性(六):记录类 Record Class

Java是一门面向对象的语言，而对于面向对象的语言中，一个众所周知的概念就是，对象是包含属性与行为的。比如HR系统中都会有雇员的概念，那雇员会有姓名，ID身份，性别等，这些我们称之为属性；而雇员同时肯...

为什么大厂要求安卓开发者掌握Kotlin和Jetpack?优雅草卓伊凡

为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡一、Kotlin：Android开发的现代语言选择1.1Kotlin是什么？Kotlin是由...

Kotlin这5招太绝了!码农秒变优雅艺术家!

Kotlin因其简洁性、空安全性和与Java的无缝互操作性而备受喜爱。虽然许多开发者熟悉协程、扩展函数和数据类等特性，但还有一些鲜为人知的特性可以让你的代码从仅仅能用变得真正优雅且异常简洁。让我们来看...

自行部署一款免费高颜值的IT资产管理系统-咖啡壶chemex

在运维时，ICT资产太多怎么办，还是用excel表格来管理？效率太低，也不好多人使用。在几个IT资产管理系统中选择比较中，最终在Snipe-IT和chemex间选择了chemex咖啡壶。Snip...

PHP对接百度语音识别技术（php对接百度语音识别技术实验报告）

引言在目前的各种应用场景中，语音识别技术已经越来越常用，并且其应用场景正在不断扩大。百度提供的语音识别服务允许用户通过简单的接口调用，将语音内容转换为文本。本文将通过PHP语言集成百度的语音识别服务，...

知识付费系统功能全解析（知识付费项目怎么样）

开发知识付费系统需包含核心功能模块，确保内容变现、用户体验及运营管理需求。以下是完整功能架构：一、用户端功能注册登录：手机号/邮箱注册，第三方登录（微信、QQ）内容浏览：分类展示课程、文章、音频等付费...

一周热门
最近发表
标签列表