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

最新推荐文章于 2024-07-09 13:56:40 发布
最新推荐文章于 2024-07-09 13:56:40 发布
阅读量7.3k 收藏 37
点赞数 3
分类专栏： 前端 学习 组件库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/108475381
版权
前端 同时被 3 个专栏收录
183 篇文章 7 订阅
订阅专栏
学习
61 篇文章 0 订阅
订阅专栏
组件库
23 篇文章 0 订阅
订阅专栏

效果如图

在这里插入图片描述

本实例代码


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实现图表联动（多图联动、图表间联动）

Gabriel_wei
关注
专栏目录
echarts 多图联动
日常学习集锦
03-10 1987
echarts 多表联动
echarts实现多图表联动效果
红烧咸咸鱼
05-21 655
echarts实现多图表联动效果
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 2544
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
自定义图标的ECharts饼图制作教程
最新发布
qq_36463299的博客
07-09 440
自定义图标的关键在于rich属性。series: [// ... 省略其他配置label: {normal: {// ... 省略格式化函数},rich: {a: {width: 38,},// ... 省略其他样式配置},// ... 其他图标配置},data: [// 数据项配置。
ECharts多图表联动功能
weixin_45653441的博客
01-10 5511
ECharts多图表联动功能的实现过程
ECharts的多表联动
2301_81685623的博客
04-15 895
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组。
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
echarts实现地图定时切换散点与多图表级联联动详解
10-18
在本文中，我们将深入探讨如何使用ECharts实现地图定时切换散点与多图表级联联动的功能。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。我们将按照...
【JavaScript源代码】ECharts多图表联动功能的实现过程.docx
12-28
在 ECharts 中，多图表联动可以实现如图所示的场景，例如比较不同年份的专业招生情况。当鼠标悬停在其中一个图表的特定数据点上时，所有关联的图表都会显示对应的 tooltip 信息。例如，当你在 2019 年的人工智能专业...
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
Echart3多图联动，一个时间轴控制多个图
04-11
Echart3多图联动，一个时间轴控制多个图，希望能够帮到大家!
Echarts简单的多表联动效果和添加水印和按钮切换数据效果
weixin_68473774的博客
04-14 1220
多表联动效果指的是在多个表格之间建立一种交互关系，以便它们之间的操作或选择能够相互影响。当在一个表格中选择或操作某些数据时，另一个表格会根据这些选择或操作自动更新显示相关的数据。例如，如果在一个表格中选择了某个地区的销售数据，另一个表格会显示该地区的详细销售信息。当在一个表格中进行视觉操作（如缩放、平移等）时，另一个表格会以相同的方式进行相应的视觉变化。这种方式可以在多个表格之间保持一致的视觉效果，从而提供更好的用户体验。
Echarts--图表数据集联动
qq_44158162的博客
12-08 1709
最近接触了不少echarts的项目，所以就参照echarts官网变动了一下图表联动。附上代码 <template> <div> <div class="mxgjEchart-item1" ref="mxgjEchart"></div> </div> </template> <script> const echarts = require("echarts"); export default { dat
echart多图联动
weixin_39808181的博客
05-28 274
Echart多图联动
SC BK
05-21 2957
Echart多图联动 核心代码： myChart1.connect([myChart2, myChart3, myChart4]); &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;ECharts&lt;/title&gt; &lt;/head&gt; &amp
echarts多图联动
m0_59805184的博客
03-14 1117
1.确定知道需要几个 什么类型的图表的情况下 <template> <div class="home"> <div id="leftTj"></div> <div id="rightTj"></div> </div> </template> <script> import * as echarts from "echarts"; export default { dat...
echarts多图表联动
chc183的博客
08-01 2895
echartsDemo.js function echartLoad(array,arrayNo){ // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( ...
代码片 -- ECharts 图表联动
niaonao
12-30 532
前言 此处需要报表统计分析短信发送情况，短信发送有发送成功，失败，未知等状态，此处以成功失败为例。图表关联饼图不需要对比短信发送量，短信发送量是总量，只需要对比成功，失败，未知等发送情况占比分析即可。 此处扩展官方实例 官方文档 支持自定义颜色， 支持图表和面板数据分离管理，dataset 定义多个 source，图表数据绑定可通过 datasetIndex 绑定 效果如下 演示代码 &lt...
项目实训（四）Echarts图表联动
cyr___的博客
07-31 874
图表联动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值