echarts 多个柱状图,折线图联动

多个chart的id联在一起就可以了

// 图表联动
    connect_chart() {
        // 曲线图联动
        let mychart1 = echarts.init(document.getElementById("chart1"))
        let mychart2 = echarts.init(document.getElementById("chart2"))
        let mychart3 = echarts.init(document.getElementById("chart3"))
        mychart1.group = 'group1'
        mychart2.group = 'group1'
        mychart3.group = 'group1'
        echarts.connect('group1')
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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
发出的红包

打赏作者

LXXgalaxy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值