关于Echarts的两表联动如何实现

多表联动

数据均为捏造数据,这里就只有两表联动
在这里插入图片描述
这里其实是使用了官方文档中的内容。
官方event文档地址
就是说起来其实也很简单,

 pie.on('click',function(params){
            if(params.name=="小学"){
            //这里的步骤就和自己平常画表图的步骤一样就行
            //官方文档里的判断方法要比我写的多,
            //我设置了name所以就直接可以用
            }

这里我用了实际上有两个div标签把两个图表分开,因为我不会用grid划分的说。其实这个方法不怎么高明。
如果大家没看明白可以私信我,我看到会回对的

以下是使用echarts实现两个柱状图联动的方法: 1. 首先,需要在HTML文件中创建两个div,分别用于显示两个柱状图,例如: ```html <div id="chart1" style="width: 600px;height:400px;"></div> <div id="chart2" style="width: 600px;height:400px;"></div> ``` 2. 在JavaScript文件中,需要使用echarts.init()方法初始化两个柱状图实例,并设置各自的option选项,例如: ```javascript let chart1 = echarts.init(document.getElementById('chart1')); let chart2 = echarts.init(document.getElementById('chart2')); let option1 = { // 第一个柱状图的option选项 // ... }; let option2 = { // 第二个柱状图的option选项 // ... }; chart1.setOption(option1); chart2.setOption(option2); ``` 3. 接下来,需要使用echarts.connect()方法将两个柱状图实例连接起来,例如: ```javascript echarts.connect([chart1, chart2]); ``` 4. 最后,需要在柱状图的点击事件中,获取到当前点击的数据,并使用echarts.dispatchAction()方法触发另一个柱状图的对应数据的高亮显示,例如: ```javascript chart1.on('click', function(params) { // 获取当前点击的数据 let dataIndex = params.dataIndex; // 触发chart2对应数据的高亮显示 chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: dataIndex }); }); chart2.on('click', function(params) { // 获取当前点击的数据 let dataIndex = params.dataIndex; // 触发chart1对应数据的高亮显示 chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: dataIndex }); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值