如何实现ECharts中多图表之间的联动效果？

本文共计1514个文字，预计阅读时间需要7分钟。

当需要展示大量数据比较时，将数据放置在一个图表中进行展示的效果并不理想。此时，可以考虑使用两个图表进行联动展示。ECharts 提供了多图表联动（connect）的功能，连接的多图表可以共享组。

当需要展示的数据比较多时，放在一个图表进行展示的效果并不佳，此时，可以考虑使用两个图表进行联动展示。

ECharts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动

实现EChart中的多图表联动，可以使用以下两种方法。

（1）分别设置每个ECharts对象为相同的group值，并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系，格式如下。

myChart1.group = 'group1'; //给第1个ECharts对象设置一个group值
myChart2.group = 'group1'; //给第2个ECharts对象设置一个相同的group值
echarts.connect('group1'); //调用ECharts对象的connect方法时，传入group值

（2）直接调用ECharts的connect方法，参数为一个由多个需要联动的ECharts对象所组成的数组，格式如下。

echarts.connect([myChart1,myChart2]);

若想要解除已有的多图表联动，则可以调用disConnect方法，格式如下。