ECharts多图表联动功能

本文介绍: ECh ar ts多图表联动功能的实现过程

ECh ar ts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动
。
分别设置每个ECh ar ts 对象为相同的group值，并通过在调用ECh ar ts 对象的connect 方法时，传入group值，从而使用多个ECh ar ts 对象建立联动关系

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

echarts.disConnect(‘group1’) //解除已有的多图表联动

在这里插入图片描述

由图可知，共有四个图表建立了多图表联动，所以当鼠标滑过四个图表任意一个图表时，四个图表会同时显示详情提示框（tooltip）。

&lt;!DOCTYPE html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="height:200px"></div>
    <div id="main2" style="height:200px"></div>
    <div id="main3" style="height:200px"></div>
    <div id="main4" style="height:200px"></div>
    <!-- ECharts单文件引入 -->
     <script type="text/javascript" src='js/echarts.js'></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));

        var option1 = {
            tooltip: { trigger: 'axis', },
            legend: { data: ['Email'], left: 422, top: 8 },
            xAxis: [{
                data: ["2022-11-10 11", "2022-11-11 11", "2022-11-12 11", "2022-11-13 11", "2022-11-14 11", "2022-11-15 11",],
            }],
            yAxis: [
                {
                    type: 'value'  //y轴为值类型
                }
            ],
            series: [{  //配置第1个图表的数据系列
                name: 'Email',
                type: 'line',
                data: [125, 62, 45, 56, 123, 205, 108, 128],
            }]
        }

        var option2 = {
            tooltip: { trigger: 'axis', },
            legend: { data: ['Union Ads'], left: 422, top: 8 },
            xAxis: [{
                data: ["2022-11-10 11", "2022-11-11 11", "2022-11-12 11", "2022-11-13 11", "2022-11-14 11", "2022-11-15 11",],
            }],
            yAxis: [
                {
                    type: 'value'  //y轴为值类型
                }
            ],
            series: [{  //配置第2个图表的数据系列
                name: 'Union Ads',
                type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
                data: [325, 98, 53, 48, 222, 256, 123, 111],
            }]
        }

        var option3 = {
            tooltip: { trigger: 'axis', },
            legend: { data: ['Video Ads'], left: 422, top: 8 },
            xAxis: [{
                data: ["2022-11-10 11", "2022-11-11 11", "2022-11-12 11", "2022-11-13 11", "2022-11-14 11", "2022-11-15 11",],
            }],
            yAxis: [
                {
                    type: 'value'  //y轴为值类型
                }
            ],
            series: [{
                name: 'Video Ads',
                type: 'line',
                smooth: true,
                data: [20, 25, 30, 35, 38, 44, 46, 48, 53, 56]
            }]
        }

        var option4 = {
            tooltip: { trigger: 'axis', },
            legend: { data: ['Direct', 'Search Engine'], left: 422, top: 8 },
            xAxis: [{
                data: ["2022-11-10 11", "2022-11-11 11", "2022-11-12 11", "2022-11-13 11", "2022-11-14 11", "2022-11-15 11",],
            }],
            yAxis: [
                {
                    type: 'value'  //y轴为值类型
                }
            ],
            series: [{
                name: 'Direct',
                type: 'line',
                smooth: true,
                data: [15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
            },
            {
                name: 'Search Engine',
                type: 'line',
                smooth: true,
                data: [25, 25, 25, 25, 25, 25, 35, 25, 25, 35]
            }]
        }

        // 为echarts对象加载数据 
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart4.setOption(option4);
        // //联动配置
        // myChart1.connect([myChart2, myChart3, myChart4]);
        // myChart2.connect([myChart1, myChart3, myChart4]);
        // myChart3.connect([myChart2, myChart1, myChart4]);
        // myChart4.connect([myChart2, myChart3, myChart1]);
         //联动配置
        myChart1.group = 'group1';
        myChart2.group = 'group1';
        myChart3.group = 'group1';
        myChart4.group = 'group1';
        echarts.connect('group1');
    </script>
</body>