Echarts实现图表联动（多图联动、图表间联动）

谁借莪１个温暖的怀抱￠ 2022-12-05 01:37 553阅读 0赞

# 效果如图 #

![在这里插入图片描述][20200908193007468.gif_pic_center]

## 本实例代码 ##

function loadBlock9() { 
        var myChart1 = echarts.init(document.getElementById("block9"));
    
        var myChart2 = echarts.init(document.getElementById("block10"));
    
        //series中的每一个label设置
        var labelOption = { 
            normal: { 
                show: true,
                position: 'top',
                distance: '10',
                align: 'left',
                verticalAlign: 'middle',
                rotate: 0,
                // formatter: '{c} {name|{a}}',
                formatter: '{c}',
                color: "#fff",
                fontSize: 10,
                rich: { 
                    name: { 
                        textBorderColor: '#fff'
                    }
                }
            }
        };
    
        //13. 新技术重要程度评价
        var option1 = { 
            title: { 
                text: "新技术重要程度评价",
                left: "center",
                top: 10,
                textStyle: { 
                    fontSize: 18,
                    fontWeight: 'normal',
                    color: "#fff"
                }
            },
            grid: { 
                //调整图的位置等
                borderWidth: 0,
                top: 40,
                left: 20,
                bottom: 25,
                right: 0,
                textStyle: { 
                    color: "#f00"
                },
                width: '75%',
            },
            legend: { 
                show: false,
                // top: 30,
                // textStyle: {//图例文字的样式
                // color: '#dbdbdb',
                // fontSize: 15
                // },
                // data: ['良种繁育技术', '提高品质良种技术', '病虫害防控技术', '优质高效栽培技术'],
                selectedMode: 'single', // 设置单选多选模式
                // selected: { // 设置默认不显示
                // '良种繁育技术': false,
                // '提高品质良种技术': false,
                // '病虫害防控技术': false
                // },
            },
            // color: ['#FFF200', '#22B14C', '#00A2E8', '#3F48CC', '#A349A4', '#E7B9C0', '#C8EFD4', '#ff5b00', '#ED1C24', '#3F48CC'],
            color: ['#E7B9C0', '#C8EFD4', '#ff5b00', '#ED1C24', '#3F48CC', '#FFF200', '#22B14C', '#00A2E8', '#3F48CC', '#A349A4'],
            tooltip: { 
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow'
                }
            },
            // textStyle: {//图例文字的样式
            // color: '#dbdbdb',
            // fontSize: 200
            // },
            calculable: true,
            xAxis: [
                { 
                    type: 'value',
                    axisLine: { 
                        //y轴线
                        lineStyle: { 
                            color: '#fff'
                        }
                    },
                    splitLine: { 
                        //坐标轴线上方的那些
                        show: false,
                        lineStyle: { 
                            color: ['#aaa', '#ddd']
                        }
                    },
                    inverse: true,
                }
            ],
            yAxis: [
                { 
                    type: 'category',
                    axisTick: {  show: false },
                    // data: ['非常重要', '比较重要', '一般', '不重要', '非常不重要'],
                    axisLine: { 
                        //x轴线
                        lineStyle: { 
                            color: '#fff'
                        }
                    },
                    axisLabel: { 
                        // 设置坐标的值的字体等
                        fontSize: 13,
                        interval: 0,
                        // formatter: function (value) { 
                        // //x轴的文字改为竖版显示
                        // var str = value.split("");
                        // return str.join("\n");
                        // }
                    },
                    position: 'right',
                }
    
            ],
            series: [
                // { 
                // name: '良种繁育技术',
                // type: 'bar',
                // barGap: 0,
                // label: labelOption,
                // data: [320, 332, 301, 334, 390]
                // },
                // { 
                // name: '提高品质良种技术',
                // type: 'bar',
                // label: labelOption,
                // data: [220, 182, 191, 234, 290]
                // },
                // { 
                // name: '病虫害防控技术',
                // type: 'bar',
                // label: labelOption,
                // data: [150, 232, 201, 154, 190]
                // },
                // { 
                // name: '优质高效栽培技术',
                // type: 'bar',
                // label: labelOption,
                // data: [98, 77, 101, 99, 40]
                // }
            ]
        };;
        myChart1.setOption(option1);
    
        $.ajax({ 
            url: bigApi.importanceOfNewTechnologies,
            // url: '../../data/index1-block7.json',
            dataType: "json"
        }).done(function () { 
            $("#block7").addClass("chart-done");
        }).done(function (back) { 
            var data = back.result;
    
            var legendName = [];// 图例的名称
            var legendSelected = { };//图例选中否？
            var xAxisD = [];//x轴的名称
            var series = []; //数据列
            data[0].value.forEach(function (val, key) { 
                xAxisD.push(val.name);
            })
            data.forEach(function (val, key) { 
                // debugger
                //每一个数据列
                var x = { 
                    type: 'bar',
                    label: labelOption,
                    barMaxWidth: "40%",
                    barMinHeight: 5,
                    label: { 
                        show: false,
                        position: 'left',
                        color: "#fff"
                    }
                };
                x.name = val.name;
                x.data = [];
                val.value.forEach(function (sec, key) { 
                    x.data.push(sec.value);
                })
                series.push(x);
                legendName.push(val.name);
                if (key != 0) { 
                    legendSelected[val.name] = false;
                }
            })
            myChart1.setOption({ 
                legend: { 
                    data: legendName,
                    selected: legendSelected,
                },
                series: series,
                yAxis: { 
                    data: xAxisD
                }
            });
    
        }).fail(function (jqXHR) { 
            console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
        });
    
    
    
    
    
    
    
    
    
        //12. 现有技术评价
        var option2 = { 
            title: { 
                text: "现有技术评价",
                left: "center",
                top: 10,
                textStyle: { 
                    fontSize: 18,
                    fontWeight: 'normal',
                    color: "#fff"
                }
            },
            grid: { 
                //调整图的位置等
                borderWidth: 0,
                top: 40,
                left: 80,
                bottom: 25,
                right: '0%',
                textStyle: { 
                    color: "#f00"
                },
                width: '50%',
    
            },
            legend: { 
                top: 'center',
                right: 0,
                type: 'scroll',
                orient: 'vertical',
                textStyle: { //图例文字的样式
                    color: '#dbdbdb',
                    fontSize: 15
                },
                // data: ['良种繁育技术', '提高品质良种技术', '病虫害防控技术', '优质高效栽培技术'],
                selectedMode: 'single', // 设置单选多选模式
                // selected: { // 设置默认不显示
                // '良种繁育技术': false,
                // '提高品质良种技术': false,
                // '病虫害防控技术': false
                // },
            },
            color: ['#E7B9C0', '#C8EFD4', '#ff5b00', '#ED1C24', '#3F48CC', '#FFF200', '#22B14C', '#00A2E8', '#3F48CC', '#A349A4'],
            tooltip: { 
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow'
                }
            },
            // textStyle: {//图例文字的样式
            // color: '#dbdbdb',
            // fontSize: 200
            // },
            calculable: true,
            xAxis: [
                { 
                    type: 'value',
                    axisLine: { 
                        //y轴线
                        lineStyle: { 
                            color: '#fff'
                        }
                    },
                    splitLine: { 
                        //坐标轴线上方的那些
                        show: false,
                        lineStyle: { 
                            color: ['#aaa', '#ddd']
                        }
                    },
                    // inverse: true,
    
                }
    
            ],
            yAxis: [
                { 
                    type: 'category',
                    axisTick: {  show: false },
                    // data: ['非常重要', '比较重要', '一般', '不重要', '非常不重要'],
                    axisLine: { 
                        //x轴线
                        lineStyle: { 
                            color: '#fff'
                        }
                    },
                    axisLabel: { 
                        // 设置坐标的值的字体等
                        fontSize: 13,
                        interval: 0,
                        // formatter: function (value) { 
                        // //x轴的文字改为竖版显示
                        // var str = value.split("");
                        // return str.join("\n");
                        // }
                    },
                    // inverse: true,
                }
            ],
            series: [
                // { 
                // name: '良种繁育技术',
                // type: 'bar',
                // barGap: 0,
                // label: labelOption,
                // data: [320, 332, 301, 334, 390]
                // },
                // { 
                // name: '提高品质良种技术',
                // type: 'bar',
                // label: labelOption,
                // data: [220, 182, 191, 234, 290]
                // },
                // { 
                // name: '病虫害防控技术',
                // type: 'bar',
                // label: labelOption,
                // data: [150, 232, 201, 154, 190]
                // },
                // { 
                // name: '优质高效栽培技术',
                // type: 'bar',
                // label: labelOption,
                // data: [98, 77, 101, 99, 40]
                // }
            ]
        };;
        myChart2.setOption(option2);
        $.ajax({ 
            url: bigApi.evaluationOfExistingTechnologies,
            // url: '../../data/index1-block1.json',
            dataType: "json"
        }).done(function () { 
            $("#block7").addClass("chart-done");
        }).done(function (back) { 
            var data = back.result;
            // console.log("1111");
            // console.log(data)
    
            var legendName = [];// 图例的名称
            var legendSelected = { };//图例选中否？
            var xAxisD = [];//x轴的名称
            var series = []; //数据列
            data[0].value.forEach(function (val, key) { 
                xAxisD.push(val.name);
            })
            data.forEach(function (val, key) { 
                // debugger
                //每一个数据列
                var x = { 
                    type: 'bar',
                    label: labelOption,
                    barMaxWidth: "40%",
                    barMinHeight: 5,
                    label: { 
                        show: false,
                        position: 'right',
                        color: "#fff"
                    }
                };
                x.name = val.name;
                x.data = [];
                val.value.forEach(function (sec, key) { 
                    x.data.push(sec.value);
                })
                series.push(x);
                legendName.push(val.name);
                if (key != 0) { 
                    legendSelected[val.name] = false;
                }
            })
            // console.log(series);
            myChart2.setOption({ 
                legend: { 
                    data: legendName,
                    selected: legendSelected,
                },
                series: series,
                yAxis: { 
                    data: xAxisD
                }
            });
    
        }).fail(function (jqXHR) { 
            console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
        });
    
    
    
        //联动
        echarts.connect([myChart1, myChart2]);
    }

**`图表实现联动的关键代码`**`echarts.connect([myChart1, myChart2]);`

注意：两个图表的数据源中，用于分类的数据要一致！

# 参考资料 #

[echarts. connect方法][echarts. connect]

[Echarts实现图表联动（多图联动、图表间联动）][Echarts]

[20200908193007468.gif_pic_center]: /images/20221123/24dcedcd2dca49dbb7d1d4d0f23a3b18.png
[echarts. connect]: https://echarts.apache.org/zh/api.html#echarts.connect
[Echarts]: https://www.jianshu.com/p/2ae846ac2438

发表评论取消回复

表情：

评论列表（有 0 条评论，553人围观）

还没有评论，来说两句吧...

相关阅读

相关左右联动

效果图： ![1264306-20190830165915805-482943172.gif][] 1.左边列表适配器代码（TypeAdapter） 2.左边列表对应的布

忘是亡心i/ 2023年08月17日 17:09/ 0 赞/ 77 阅读

相关 php 如何实现图表联动,教你在BDP制作交互式图表实现联动分析

“图表联动”到底有什么价值呢？图表联动功能可以将某个图表作为筛选器，点击其中某一个数据项，与其关联的图表将会筛选出所选项的数据内容，快速且直观。主要价值是为了方便大家查

左手的ㄟ右手/ 2023年01月13日 10:43/ 0 赞/ 81 阅读

相关 Echarts实现图表联动（多图联动、图表间联动）

效果如图 ![在这里插入图片描述][20200908193007468.gif_pic_center] 本实例代码 function loadBlock9

谁借莪１个温暖的怀抱￠/ 2022年12月05日 01:37/ 0 赞/ 554 阅读

相关三级联动

插件: <script type="text/ecmascript" src="areadata.js"></script> <script type="text/ecm

布满荆棘的人生/ 2022年09月25日 15:25/ 0 赞/ 212 阅读

相关 echarts实现双柱图数据联动

一、效果实现如下的双柱图联动 ![在这里插入图片描述][e1f39c3ed3a844db99f3f5ef35757f62.gif] 二、需求分析 1. 两

超、凢脫俗/ 2022年09月10日 02:25/ 0 赞/ 281 阅读

相关二级联动

以省份和城市为例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

电玩女神/ 2022年07月27日 14:42/ 0 赞/ 194 阅读

相关二级联动

<select id="depositorytype" name="depositorytype" οnchange="ld();" class="zj-way">

刺骨的言语ヽ痛彻心扉/ 2022年04月02日 15:24/ 0 赞/ 213 阅读

相关 Echarts饼状图和数据列表联动

实现效果即点击饼状图的具体区域，实现对数据列表的筛选展示（筛选条件不进行叠加） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

野性酷女/ 2022年02月16日 11:43/ 0 赞/ 729 阅读

相关 CascadingDropDown 联动

CascadingDropDown控件用于级连下拉列表的选择，当没有选择第一级下接列表时，第二级是不可选的（从服务器获得数据然后再显示数据）。属性列表： Tar

短命女/ 2021年12月24日 14:55/ 0 赞/ 146 阅读

相关 echarts 图表联动connect、事件、分发事件模拟用户行为dispatchAction、清空图表

图表联动: 方式一: echarts.init对象.group='x'; echarts.init对象2.group='x';

旧城等待，/ 2021年07月24日 19:44/ 0 赞/ 2392 阅读