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

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

一、背景

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

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.

通过事件

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

四、 具体例子

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

全部源码如下:

<!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)

相关推荐

  • ajax实现异步加载ECharts图表数据

    html代码 <div class="layui-row" style="margin-top:0.5rem"> <div style=&qu ...

  • python测试开发django-147.ECharts 生成饼图

    前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求. ECharts下载与使用 可以在直接下载 echarts.min.js 并用 <scr ...

  • ECharts数据可视化:从0到1的蜕变(内部技术分享总结)

    前言 先简单介绍一下自己,我是Jack Chen,一名非常热爱学习的[高级Web前端工程师],从事Web前端工作多年,具有丰富的大中型实战项目开发经验.[学习与写作]是目前唯一每天都坚持完成的事情,业 ...

  • 3D饼/环Echarts图的实现

    首先确保在项目中引入了echarts和echarts-gl "echarts": "^4.9.0", "echarts-gl": " ...

  • Echarts快速入门

    本文作者钢头娃,转载请备注 Echarts 快速入门 Echarts 介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏 ...

  • 成功vue使用曲线图

    先安装:npm install echarts –save <template>   <div class="app-container">     < ...

  • pyecharts和echarts的混合使用

    ECharts是一个由百度开发的纯 Javascript 的图表库,pyecharts是某三位大佬将ECharts移植到Python项目中的产物,在Python网站中可以更轻松的接入图表,但是个人感觉 ...

  • echarts 树图tree 改为流程图

    先上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  • echarts.init 使用jq获取初始化对象

    var myChart = echarts.init($('#main')[0]); // 或者 var myChart = echarts.init($('#main').get(0));

  • uml类图的图表该怎么画?求告知

    想知道UML类图的图表怎么画?我们先一起来了解一下什么是UML,然后小编再给大家分享如何绘制这种图表的方法. UML,即统一建模语言,英文全称为Unified Modeling Language.是一 ...

  • 超霸气的Excel 2016新图表——树状图

    超霸气的Excel2016新图表--树状图 树状图提供数据的分层视图,按颜色和距离显示类别,可以轻松显示其他图表类型很难显示的大量数据,一般用于展示数据之间的层级和占比关系,矩形的面积代表数据大小. ...

  • PowerBI自定义图表:蝴蝶结图

    Bowtie Chart,蝴蝶结图,主要用于显示从一个类别到另一个类别的数据流,快速比较一个或多个类别中的值,因其形似蝴蝶结而得名. 首先需要加载该图表到PowerBI Desktop中, 该图非常适 ...

  • 中考物理总复习知识点演练,思维导图 知识图表 题目,初一至初三

    中考物理总复习知识点演练,思维导图 知识图表 题目,初一至初三

  • 图表 | 这旋风图有点美

    我们想做就是如下这张旋风图了!和一般旋风图不同的是好像两边系列都有浅色背景,具体我们来使用Excel做一下吧! 经过小编摸索了半个小时,总算是有了套路,下面我们带大家一起来耍! 先说思路:此类图一般使 ...

  • PPT图表互动折线图,制作简易,效果拔群

    记得坚持打卡哦~ 最近微信社群小伙伴提到一个PPT图表的问题,希望在PPT中实现下图的效果. 什么意思呢?就是当鼠标点到折线图的标记时候,会自动显示出一个说明窗口,如上图17-12的数据说明. 这个可 ...

  • Excel图表技巧 折线图美化基本技法

    Excel图表技巧 折线图美化基本技法

  • 江南百景图 x 非人哉 联动即将开启!哪吒、红孩儿前来报道

    非人入百景,神仙下江南.7月23日起,江南百景图将与非人哉展开系列联动活动,第一期联动居民 -- 哪吒.红孩儿入住江南小镇! 非人哉 · 哪吒 源自于中国古代神话人物,漫画<非人哉>中的角 ...

  • 创意图表——五星评价图

    我们,让Excel变简单 年底了,公司会做各种调查和评估,今天我们介绍一个创意图表--五星评价图,可以展示这些调查和评估结果 我们先来看效果 我们的数据如下图: 第一列是测评的项目,第二列是项目得分 ...