欢迎光临
我的个人博客网站

Echarts实现图表联动(多图联动、图表间联动)


Echarts实现图表联动(多图联动、图表间联动)

一、背景

Echarts.js目前已经提供了connect功能,只要图标的legend一样,那么就能实现联动。
下面两个链接是介绍Echarts connect的用法的。

ECharts 联动效果

官方文档中connect的使用方法

二、原始例子

通过重新绘制

官方文档提供的案列

Echarts实现图表联动(多图联动、图表间联动)

在这个样例中,随着鼠标在坐标轴上的移动,饼图会不断的变化,其关键在于这一段代码。

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.

Echarts实现图表联动(多图联动、图表间联动)

通过事件

Echarts实践介绍

轮流高亮例子

Echarts实现图表联动(多图联动、图表间联动)

其关键在于

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

四、 具体例子

以下是一个对原始例子进行的一些改进之后的效果图:

Echarts实现图表联动(多图联动、图表间联动)

全部源码如下:

<!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的对应情况来实行高亮。

赞(0) 打赏
未经允许不得转载:张拓的天空 » Echarts实现图表联动(多图联动、图表间联动)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏