ECharts多图表联动功能的实现过程

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

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方法，格式如下。

echarts.disConnect('group1');

利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表，如图所示。

由图可知，共有上下两个柱状图，分别表示2019、2020两个年度的招生情况汇总。由于建立了多图表联动，所以当鼠标滑过2019年或2020年的人工智能专业柱体上时，系统会同时在2019年、2020年的人工智能专业上自动弹出相应的详情提示框（tooltip）。

利用某大学各专业2016－2020年的招生情况绘制饼图与柱状图的联动图表，如图所示。

由图可知，上方的饼图和下方的柱状图（柱状图也可以通过工具箱转为折线图）。当鼠标滑过饼图的某个扇区时，饼图出现的详情提示框显示相应扇区所对应年份的招生人数及其所占各年总招生人数的比例，同时柱状图（或折线图）也会相应地出现详情提示框，显示对应年份各个专业的招生人数的详细数据。

源代码如下：

总结

到此这篇关于ECharts多图表联动实现的文章就介绍到这了,更多相关ECharts多图表联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！