ECharts的多表联动

1.为什么使用多表联动

当需要展示的数据比较多时,放在一个图表进行展示的效果不佳,此时,可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect),联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角坐标系下tooltip 的联动。

2.多表联动的使用方法

要实现ECharts中的多图表联动,可以使用以下两种方法。
(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时,传入group值,从而使用多个ECharts对象建立联动关系
设置相同的group 值

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


(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组
调用connect方法

echarts.connect([myChart1,myChart2]);


若想要解除已有的多图表联动,则可以调用disConnect()方法
调用disConnect方法
 

echarts.disConnect('group1');

3.案例实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main1" style="width: 600px; height: 400px;"></div>
    <div id="main2" style="width: 600px; height: 400px;"></div>
    <!-- 第一个水印 -->
  <div class="watermark1">水印 1</div>
  <!-- 第二个水印 -->
  <div class="watermark2">水印 2</div>
    <script type="text/javascript">
        var myChart1=echarts.init(document.getElementById("main1"));
        var waterMarkText = '木可子'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.globalAlpha = 0.08;
		ctx.font = '30px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(50, 50); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
        var option1={
            title: {
                text: '一周温度变化',
                subtext: '来源:天气预报',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend:{
                data:['温度'],
                left:422,
                color:'red',
                top:8
            },
            xAxis: {
               type: 'category',
               data: ['周一', '周二', '周三','周四','周五','周六','周天']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
                name: '温度',
                type: 'bar',
                label: { // 柱状图上的文字设置
                show: true, // 是否显示
                rotate: 60, // 旋转角度
                position: 'top' // 显示位置
                        },
                barWidth: '30%', // 柱的宽度
                data:[20,25,23,24,26,22,28] 
        }]
    };
    var myChart2=echarts.init(document.getElementById("main2"))
    var option2={
            title: {
                text: '一周温度变化',
                subtext: '来源:天气预报',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend:{
                data:['温度'],
                left:422,
                color:'red',
                top:8
            },
            xAxis: {
               type: 'category',
               data: ['周一', '周二', '周三','周四','周五','周六','周天']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
                name: '温度',
                type: 'line',
                label: { // 柱状图上的文字设置
                show: true, // 是否显示
                rotate: 60, // 旋转角度
                position: 'top' // 显示位置
                        },
                barWidth: '30%', // 柱的宽度
                data:[20,25,23,24,26,22,28] 
        }]
    };
    myChart1.setOption(option1);// 为myChart1对象加载数据
    myChart2.setOption(option2);// 为myChart2对象加载数据
    // 多图表联动配置方法1:分别设置每个echarts对象的group值
    myChart1.group='group1';
    myChart2.group='group1';
    echarts.connect('group1');
    // 多图表联动配置方法2:直接传入需要联动的echarts对象myChart1,myChart2
	echarts.connect([myChart1,myChart2]);
    </script>
</body>
</html>

实现

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts 是一个基于 JavaScript 的开源可视化库,可以用于创建各种图表,包括折线图、柱状图、饼图等。在 ECharts 中实现多图联动可以通过以下步骤完成: 1. 创建多个图表实例: 在页面中创建多个 ECharts 图表实例,可以通过不同的 div 元素来容纳不同的图表。 2. 绑定事件: 在需要联动图表上绑定事件,例如鼠标移动事件或点击事件。可以使用 ECharts 提供的 on 方法来绑定事件。 3. 获取数据: 在事件回调函数中,获取当前图表的相关数据。可以使用 ECharts 提供的 getOption 方法来获取图表的选项配置。 4. 更新其他图表: 在事件回调函数中,根据当前图表的数据更新其他需要联动图表。可以使用 ECharts 提供的 setOption 方法来更新图表的选项配置。 下面是一个简单的示例代码,展示了如何实现两个折线图的联动: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 多图联动示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> </head> <body> <div id="chart1" style="width: 600px; height: 400px;"></div> <div id="chart2" style="width: 600px; height: 400px;"></div> <script> var chart1 = echarts.init(document.getElementById('chart1')); var chart2 = echarts.init(document.getElementById('chart2')); // 假设有两组数据,data1 和 data2 // 绘制图表1 var option1 = { xAxis: {}, yAxis: {}, series: [{ type: 'line', data: data1 }] }; chart1.setOption(option1); // 绘制图表2 var option2 = { xAxis: {}, yAxis: {}, series: [{ type: 'line', data: data2 }] }; chart2.setOption(option2); // 绑定事件 chart1.on('mousemove', function(params) { // 获取当前图表的数据 var data = params.data; // 更新图表2的数据 option2.series[0].data = data; chart2.setOption(option2); }); chart2.on('mousemove', function(params) { // 获取当前图表的数据 var data = params.data; // 更新图表1的数据 option1.series[0].data = data; chart1.setOption(option1); }); </script> </body> </html> ``` 在上述示例中,我们创建了两个折线图的实例 `chart1` 和 `chart2`,并分别绘制了两组数据。通过绑定 `mousemove` 事件,当鼠标在其中一个图表上移动时,会获取当前图表的数据,并更新另一个图表的数据,从而实现了两个图表联动效果。 注意:上述示例仅为演示多图联动的基本思路,实际应用中可能需要根据具体需求进行适当调整和扩展。同时,ECharts 还提供了更多丰富的功能和配置选项,可以根据实际需要进行使用和定制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值