前言
echarts 是一款优秀的开源数据可视化库，但是在实际项目中，我们经常遇到需要多个图表之间的联动。在这种场景下，我们需要用到 echarts 提供的消息机制，但是在实际使用中需要处理的逻辑比较繁琐，需要不断手动派发事件和监听事件，这时候，一个专门用来简化这个过程的工具库就很有必要了。echarts-bridge 就是这样一款 npm 包，它可以帮助我们快速实现 echarts 图表之间的消息传递，极大地简化了图表联动的开发难度。
本文将从 echarts-bridge 的安装使用、消息机制的设计实现和示例介绍三个方面，详细讲解如何使用这个工具库来实现 echarts 图表之间的联动。
echarts-bridge 的安装使用
使用 echarts-bridge 首先需要安装它，我们可以在命令行输入以下命令进行安装：
npm install echarts-bridge
安装完成之后，在需要使用的 JS 文件中引入 echarts-bridge：
import echartsBridge from 'echarts-bridge';
这样就可以愉快地使用 echarts-bridge 工具库了。
消息机制的设计实现
echarts-bridge 它实现了一个基于事件发布和订阅的消息机制，通过将事件的发布和订阅进行解耦，达到了降低耦合度和提高代码复用性的目的。下面我们具体介绍一下它的实现原理。
发布和订阅机制
首先，我们来看下 echarts-bridge 提供的事件发布和订阅机制。
echarts-bridge 实现了一个 EventBus 类，它提供了以下方法：
on(event: string, handler: Function): void：订阅事件，当事件event发布时，执行方法handler。once(event: string, handler: Function): void：订阅事件，但是只执行一次。off(event: string, handler: Function): void：取消之前订阅的事件。emit(event: string, ...args: any[]): void：发布事件event，并传递参数...args。
其中，emit 方法会触发 on 和 once 方法中订阅的事件，并将参数传递给事件的处理函数。
echarts-bridge 中的实现
在 echarts-bridge 中，主要分为两个部分：消息中心和图表行为劫持。
消息中心的实现
echarts-bridge 将 EventBus 封装在了 MessageCenter 类中，并提供了以下方法：
register(id: string, opts?: RegisterOptions): void：将当前图表实例注册到消息中心中。trigger(action: string, payload?: any): void：触发图表行为，并发布相应的消息，参数payload为对应的消息参数。
图表行为劫持的实现
echarts-bridge 在实现图表的消息传递时，由于 echarts 的图表行为都是通过事件进行消息传递的，因此需要进行劫持。echarts-bridge 将这个功能都封装在了 Bridge 类中，并提供了以下方法：
bridge(echarts: ECharts): void：劫持 echarts 的事件，将事件发布到EventBus上。
至此，echarts-bridge 的消息机制实现过程就介绍完了，接下来我们看一下具体场景下的使用。
示例介绍
我们在一个实际的 echarts 项目中，实现一个图表之间的联动，场景是在一个时间区间内，控制某个关键词的搜索量和注册量，同时展示两种数据的变化。我们可以将这个场景分为三个步骤：图表的初始化、图表数据的更新和联动实现。
图表的初始化
为了方便起见，我们这里使用 echarts-liquidfill 和 echarts-pie 这两个 echarts 图表库进行实现，首先我们需要在 HTML 文件中引入相应的 JS 文件和 CSS 文件，具体如下所示：
<link rel="stylesheet" href="./node_modules/echarts-liquidfill/dist/echarts-liquidfill.min.css" /> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script src="./node_modules/echarts-liquidfill/dist/echarts-liquidfill.min.js"></script> <script src="./node_modules/echarts-pie/dist/echarts-pie.min.js"></script>
然后我们在 JS 文件中定义两个图表的 DOM ID，以及相关的 echarts 配置项，具体代码如下所示：
-- -------------------- ---- ------- ----- ---------- - - ------- -- ----- ------------- ----- ------ ----- ------ ------ ------------ -------- - ----- ----- --------------- -- ---------- - ------------ ---------- ------------ -- -- -- --- -- ----- ------------ - - ------- -- ----- ------ ------- ------ ------- ------- ------- ----- --- --- ------- - ----- ------ -- -- ----- -------------- - ---------------------------------------- ----- ---------------- - ------------------------------------------ ----- ----------- - ----------------------------- ----- ------------- - ------------------------------- ---------------------------------- --------------------------------------展开代码
这里我们定义了两个 DOM ID 为 search-chart 和 register-chart 的 echarts 图表实例，并设置了各自的 echarts 配置项。接下来，我们将图表实例注册到消息中心，以便后面的联动功能的实现，具体代码如下所示：
const messageCenter = echartsBridge.getInstance(); messageCenter.register('search-chart'); messageCenter.register('register-chart');
图表数据的更新
接下来我们需要更新图表的数据。因为在我们的场景中，两个图表的数据都需要动态更新，所以我们需要在数据更新之后，触发相应的事件，以便进行图表之间的联动。具体代码如下所示：
-- -------------------- ---- ------- -------- ----------------- ------ - ----- ----- - ---- --- -------------- - ----------- - -------------- ----- ------ - ------------------ -- ---------------------- --- ------ - ----- ---- - ---------------------- ----------- ----- ----- --- ----------------- ------- -- ----- --- --- - ---- -- ---------------------- --- ------------- - ----------------- ------- -- ----- -------- --- --- - ------------------------------------- - ----- ----- --- -展开代码
这里我们封装了一个更新图表数据的方法 updateChart，以便在数据更新之后，进行相应的消息发布。需要注意的是，在调用 messageCenter.trigger 方法时，我们传递了两个参数：chart-update 和 { name, value }。这里 chart-update 为我们自定义的事件名称，{ name, value } 代表当前图表的名称和对应的数值。
这样，我们就完成了图表数据的更新，接下来我们进入到最后一个步骤：图表的联动实现。
联动实现
在我们的场景中，需要联动实现的功能是两个图表的数据互相依赖。具体来说，就是当 search-chart 图表的数据发生变化时，应当同时更新 register-chart 图表的数据；反之，当 register-chart 图表的数据发生变化时，也应当同时更新 search-chart 图表的数据。我们可以在消息中心中监听自定义事件 chart-update，并在事件的回调函数中进行相应的数据联动操作。具体代码如下所示：
messageCenter.on('chart-update', ({ name, value }) => { if (name === 'search-chart') { updateChart('register-chart', 10000 - value); } else if (name === 'register-chart') { updateChart('search-chart', 10000 - value); } });
此时，我们就完成了图表之间的联动功能实现。在实际项目中，我们可以根据需要，修改上述代码，满足不同的联动需求，从而实现更加灵活、高效的图表联动功能。
总结
本文介绍了 echarts-bridge 工具库的安装和使用，深入探讨了它的消息机制的实现原理，并通过示例讲解了在 echarts 项目中如何实现图表之间的联动。相信通过本文的学习，大家已经可以从容地应对各种 echarts 项目开发中的问题了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbc81e8991b448e630b
