- A+
Echarts实现图表联动（多图联动、图表间联动）
一、背景
Echarts.js目前已经提供了connect功能，只要图标的legend一样，那么就能实现联动。
下面两个链接是介绍Echarts connect的用法的。
二、原始例子
通过重新绘制
在这个样例中，随着鼠标在坐标轴上的移动，饼图会不断的变化，其关键在于这一段代码。
myChart.on('updateAxisPointer', function (event) { var xAxisInfo = event.axesInfo[0]; if (xAxisInfo) { var dimension = xAxisInfo.value + 1; myChart.setOption({ series: { id: 'pie', label: { formatter: '{b}: {@[' + dimension + ']} ({d}%)' }, encode: { value: dimension, tooltip: dimension } } }); } }); 本质上是通过鼠标事件，不断获取xAxisInfo，然后根据获取到的xAxisInfo.value(dimension)重新绘制饼图。这个可视化过程中数据是以数据集形式呈现的，所以用的encode，具体介绍可以在如何使用 dataset 管理数据看到。
如果要看event都有什么，通过console.log(event)即可获取,比如一道第一个横轴坐标2012时，输出内容如下，其value为0.
通过事件
其关键在于
myEcart.dispatchAction({ type:'highlight', seriesIndex:0, dataIndex:app.currentIndex }); Echarts的action还有很多，在echarts官网的API中可以输入action进行检索。
之所以可以使用这个实现多图的联动，实质是一个图上发生鼠标移动事件后，调用另一个图，使其产生动作。比如myechart1和myechart2，如果获取到了myechart1的params信息，通过这些信息可以对应到myechart2的dataIndex、SeriesIndex，那么，就可以使用这样的形式实现联动。
三、 实现方法
记住这两个东西就好
myEchart.setOption \ 重新绘制
myEchart.dispatchAction \echarts action
四、 具体例子
以下是一个对原始例子进行的一些改进之后的效果图：
全部源码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 900px;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { legend: {}, tooltip: { //trigger: 'axis', showContent: false, }, dataset: { source: [ ['product', '2012', '2013', '2014', '2015', '2016', '2017'], ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] ] }, xAxis: {type: 'category', triggerEvent: true, //axisPointer: {show:true} }, yAxis: {gridIndex: 0}, grid: {top: '55%'}, series: [ {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, {type: 'line', smooth: true, seriesLayoutBy: 'row', symbolSize: 10}, { type: 'pie', id: 'pie', radius: '30%', center: ['50%', '25%'], label: { formatter: '{b}: {@[2012]} ({d}%)' }, encode: { itemName: 'product', value: '2012', tooltip: '2012' } } ] }; setTimeout(function () { myChart.on('mouseover',function(params){ if(params.componentType == "xAxis"){ var xAxisInfo = params.value; myChart.setOption({ series: { id: 'pie', label: { formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)' }, encode: { value: xAxisInfo, tooltip: xAxisInfo } } }); } if(params.componentType == "series" && params.seriesType == 'line'){ var xAxisInfo = params.value[0]; myChart.setOption({ series: { id: 'pie', label: { formatter: '{b}: {@[' + xAxisInfo + ']} ({d}%)' }, encode: { value: xAxisInfo, tooltip: xAxisInfo } } }); } setTimeout(function(){ myChart.dispatchAction({ type: 'highlight', seriesIndex: 4, dataIndex: params.seriesIndex }); },300); }); myChart.on('mouseout',function(params){ myChart.dispatchAction({ type: 'downplay', seriesIndex: 4, dataIndex: params.seriesIndex }); }); },0); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> 那两个if主要是用于获取信息，如果不是两个图画在同一个myEchart里其实没有那么麻烦，实际上可以忽略不看。鼠标移动到某一和线图的点的时候，并图中对应的块将会高亮。
实现的关键在于通过鼠标事件，获取到了params的相关信息，通过
myChart.dispatchAction({ type:'highlight', seriesIndex:'4', dataIndex:params.seriesIndex }); 实现饼图部分的高亮。这个例子中两个图是在同一个myechart中，如果我们画在两个不同的图像中如何实现高亮呢？
简化来写就是这样
myChart1.on('mouseover',function(params){ myChart2.dispatchAction({ type:'highlight', seriesIndex:4, dataIndex:params.seriesIndex }); }); 具体需要根据params的对应情况来实行高亮。
