Echarts问题记录 两组legend,某一组点击哪个legend，哪个颜色改变(使用legendselectchanged)

最新推荐文章于 2024-06-04 10:35:52 发布
置顶 最新推荐文章于 2024-06-04 10:35:52 发布
阅读量4.7k 收藏 1
点赞数 1
分类专栏： 毕设问题总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/if_i_were_a/article/details/105517846
版权

最近有小伙伴私信问关于这篇文章的问题，现在将其中的某些点再写的细致一些，供大家参考[梦想还是要有的，万一点击量过一千了呢]

项目背景:

毕设项目，完成基于云平台工业园水质监测系统的软件部分，其中有一个小部分是要对用户输入的区域的各个属性做对比。

问题描述:

我需要两组legend,第一组显示区域号（一号区域，二号区域，三号区域等等，由用户输入，用逗号分隔），第二组显示属性，每个区域都有的属性（水温，PH，耗氧量等），点击属性之后，显示出需要对比的区域这个属性的对比图，同时属性变为蓝色，其他没有点击的属性还是灰色。

效果图如下：input没有输入的时候，默认对比的是1,2,3号区域的情况,第二组legend中属性中点击哪个，显示哪个属性某几个区域的对比情况(默认对比的是水温)，效果如图

整体实现思想:两组legend，第二组没有图标，只有文字，data为null（下面折线图显示的那些data是第一组的）,下面的数据是属于第一组的(区域号的)，使用myChart.on('legendselectchanged',function())，点击之后使得legend第二个数组的颜色变化[有试过只用一组legend，下面用几个按钮的形式，控制每次只能点击一个按钮，以及做相应颜色变化，但鄙人前端水平菜之又菜，没有实现。]。

核心代码如下:

//监测第二组legend变化情况
 myChart.on('legendselectchanged', function (obj) {
                propertyName = obj.name;
                for (var i = 0; i < horLegend.length; i++) {
                    seriesArray[i].data = getTotalResponse(data, horLegend[i]);
                }
                obj.selected[propertyName] = false;
                setLegendColor(propertyName);
                myChart.setOption(option);
                // triggerAction('legendSelect', obj);
            });

 function setLegendColor() {
                for (var i = 0; i < 7; i++) {
                    option.legend[1].data[i].textStyle.color = '#73716d';
                }
                if (propertyName == '水温') {
                    option.legend[1].data[0].textStyle.color = '#1D6FA3';
                } else if (propertyName == 'PH') {
                    option.legend[1].data[1].textStyle.color = '#1D6FA3';
                } else if (propertyName == '耗氧量') {
                    option.legend[1].data[2].textStyle.color = '#1D6FA3';
                } else if (propertyName == '氨氮') {
                    option.legend[1].data[3].textStyle.color = '#1D6FA3';
                } else if (propertyName == '溶解氧') {
                    option.legend[1].data[4].textStyle.color = '#1D6FA3';
                } else if (propertyName == '电导率') {
                    option.legend[1].data[5].textStyle.color = '#1D6FA3';
                } else {
                    option.legend[1].data[6].textStyle.color = '#1D6FA3';
                }
            }

        }

现在将整个页面的代码全都贴在下面

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后端分页</title>
    <link href="/css/easyui.css" type="text/css" rel="stylesheet">
    <link href="/css/icon.css" type="text/css" rel="stylesheet">
    <link href="/css/myStyle.css" type="text/css" rel="stylesheet">
    <link href="/css/myStyle1.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script>
        var zoneMessage;
        $(document).load('click', "#zoneCompare", function () {
            searchAllPart_rc();
        });

        function searchAllPart_rc() {
            part1Chart_rc();
            // part2Chart();
            // part3Search();
        }

        function part1Chart_rc() {
            inputAssignment();
            $.ajax({
                url: "/realDataCompare/queryMultiTodayMessage.do",
                type: "post",
                dataType: "json",
                data: {"zoneMessage": zoneMessage},
                success: function (data) {
                    fillPart1_rc(data);
                },
                error: function (msg) {
                    alert("ajax连接异常：" + msg);
                }
            });
        }

        function fillPart1_rc(data) {
            var myChart = echarts.init(document.getElementById('part1_2_rc'));
            var horLegend = zoneMessage.split(",");
            var horLegend_name = new Array(horLegend.length);
            var propertyName = '水温';
            for (var i = 0; i < horLegend.length; i++) {
                horLegend_name[i] = horLegend[i] + "号区域";
            }
            var seriesArray = [];

            for (var i = 0; i < horLegend.length; i++) {
                seriesArray.push({
                    name: horLegend_name[i],
                    type: 'line',
                    data: getTotalResponse(data, horLegend[i])
                });
            }
            seriesArray.push({
                name: '水温',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: 'PH',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: '耗氧量',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: '氨氮',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: '溶解氧',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: '电导率',
                type: 'line',
                data: null
            });
            seriesArray.push({
                name: '浊度',
                type: 'line',
                data: null
            });
            var option = {
                    grid: {
                        left: 70,
                        right: 60,
                        height: '70%',
                        bottom: 65
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    legend: [
                        {
                            top: 10,
                            data: horLegend_name,
                            selectedMode: false,//取消图例上的点击事件
                            x: 'center'
                        },
                        {
                            icon: 'none',
                            top: 30,
                            x: 'center',
                            // selectedMode: 'single',
                            data: [
                                {
                                    name: '水温',
                                    textStyle: {
                                        color: '#73716d',
                                    }
                                },
                                {
                                    name: 'PH',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                },
                                {
                                    name: '耗氧量',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                },
                                {
                                    name: '氨氮',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                },
                                {
                                    name: '溶解氧',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                },
                                {
                                    name: '电导率',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                },
                                {
                                    name: '浊度',
                                    textStyle: {
                                        color: '#73716d'
                                    }
                                }],
                            selected: {
                                '水温':
                                    true,
                                'PH':
                                    true,
                                '耗氧量':
                                    true,
                                '氨氮':
                                    true,
                                '溶解氧':
                                    true,
                                '电导率':
                                    true,
                                '浊度':
                                    true
                            }
                            ,
                            // inactiveColor: "#73716d"
                        }
                    ],
                    xAxis: {
                        data: ["0", "1", "2", "3", "4", "5",
                            "6", "7", "8", "9", "10", "11",
                            "12", "13", "14", "15", "16", "17",
                            "18", "19", "20", "21", "22", "23"]
                    }
                    ,
                    yAxis: {
                        // boundaryGap: true,
                        // min: 10
                    }
                    ,
                    series: seriesArray
                }
            ;

            myChart.on('legendselectchanged', function (obj) {
                propertyName = obj.name;
                for (var i = 0; i < horLegend.length; i++) {
                    seriesArray[i].data = getTotalResponse(data, horLegend[i]);
                }
                obj.selected[propertyName] = false;
                setLegendColor(propertyName);
                myChart.setOption(option);
                // triggerAction('legendSelect', obj);
            });
            myChart.setOption(option, true);

            // 使用刚指定的配置项和数据显示图表。
            function getTotalResponse(data, i) {
                var temp = new Array(data.result[i].length);
                for (var j = 0; j < data.result[i].length; j++) {
                    if (propertyName == '水温') {
                        temp[j] = data.result[i][j].waterTemperature;
                    } else if (propertyName == 'PH') {
                        temp[j] = data.result[i][j].ph;
                    } else if (propertyName == '耗氧量') {
                        temp[j] = data.result[i][j].cod;
                    } else if (propertyName == '氨氮') {
                        temp[j] = data.result[i][j].nh3;
                    } else if (propertyName == '溶解氧') {
                        temp[j] = data.result[i][j].dox;
                    } else if (propertyName == '电导率') {
                        temp[j] = data.result[i][j].conductivity;
                    } else if (propertyName == '浊度') {
                        temp[j] = data.result[i][j].turbidity;
                    }
                }
                return temp;
            }

            function setLegendColor() {
                for (var i = 0; i < 7; i++) {
                    option.legend[1].data[i].textStyle.color = '#73716d';
                }
                if (propertyName == '水温') {
                    option.legend[1].data[0].textStyle.color = '#1D6FA3';
                } else if (propertyName == 'PH') {
                    option.legend[1].data[1].textStyle.color = '#1D6FA3';
                } else if (propertyName == '耗氧量') {
                    option.legend[1].data[2].textStyle.color = '#1D6FA3';
                } else if (propertyName == '氨氮') {
                    option.legend[1].data[3].textStyle.color = '#1D6FA3';
                } else if (propertyName == '溶解氧') {
                    option.legend[1].data[4].textStyle.color = '#1D6FA3';
                } else if (propertyName == '电导率') {
                    option.legend[1].data[5].textStyle.color = '#1D6FA3';
                } else {
                    option.legend[1].data[6].textStyle.color = '#1D6FA3';
                }
            }

        }

        function inputAssignment() {
            if ($('#searchText_rc').val() == null || $('#searchText_rc').val() == '') {
                zoneMessage = '1,2,3';
            } else {
                zoneMessage = $('#searchText_rc').val();
            }
        }

        //得到区域id和参数值对应的横线
    </script>
</head>
<body>
<div class="realData_compare_r_card1" id="part1">
    <div class="realData_compare_r_card1_part1_2">
        <input type="text" placeholder="请输入要对比的区域,用逗号分割，例如: 1,2,3" id="searchText_rc">
        <button class="btn btn-info btn-xs" type="button" onclick="searchAllPart_rc()">查询</button>
    </div>
    <div id="part1_2_rc" style="height: 440px;width: 700px;">
    </div>
</div>
<!--<div class="r_card2" id="part2">-->

<!--</div>-->
<!--<div class="r_card2" id="part4">-->

</div>
</body>

</html>

github代码如下 https://github.com/songwenjinger/demo   [前后端都在一起]

文末，愿所有的美好都能与你不期而遇
if_i_were_a
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
echarts legend 排列问题
05-14
legend 图例组件可以分组展示。详细说明：https://blog.csdn.net/qq_36437172/article/details/106125254
对echarts压缩包进行修改当legend过多时可以进行翻页
08-10
在 ECharts 中，`legend` 是一个非常重要的组件，用于显示图表中的系列（series）名称，通常以图标和文字的形式呈现。然而，当图表包含很多系列时，`legend` 可能会占据很大的空间，导致页面布局不理想。为了处理...
echarts，给legend注册点击事件
逆风优雅的博客
05-10 2909
echarts图表注册点击事件，要在我们初始化后进行。 以vue项目中echarts为例： myChart.on("legendselectchanged",(e)=>{ }） 图例的点击事件 this.myChart = this.$e.init(this.$el); // init dom元素 this.myChart.setOption(this.chartOption, true); // 转载配置信息
在echarts中，如何使用复选框代替legend控制显隐
weixin_43301156的博客
03-12 3433
开发过程中遇到了一个问题,需要使用复选框checkbox来代替legend控制数据显示操作,顺便记录一下 效果展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>E...
echarts数据量过大时会造成legend很多的解决方法
qq_54818343的博客
06-04 462
设置后可以让legend设置为一行显示，通过箭头进行上下页切换。
JS事件
Ulrica_Amaris的博客
09-07 528
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
扬帆前行
06-13 1万+
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏，进行了数据的二次处理，所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件，会关闭一个块，此时就需要重新去计算数据并重新渲染echarts，需求并没有要求做点击关闭部分块在占比图中，网上大部分资源是说设置selectedMode:false，但是这个一旦设置为false，那么点击事件和鼠标悬浮显示tooltie事件就会都取消，显然不符合，经过查官方文档发现legendselectchang
echarts饼图给legend图例增加自定义点击事件
x_1999的博客
01-15 2065
echarts图例点击会有一个默认的点击事件，会把点击的图例对应的legend取消。
echarts学习之legend点击事件
热门推荐
King的博客
09-19 2万+
首先，明确本篇博客的重点，主要有三个： 1. 给legend添加点击事件 2. 禁用legend点击事件的默认行为（类型checkbox多选框） 3. 解决点击事件重复触发问题 问题一 let myCharts = Echarts.init(document.getElementById('bar')) let x = [] let y1 = [] let y2 = [] let idList = [] val.forEach(e => { x.push(e.name) y1.push(e.
处理echarts堆叠柱状图的legend点击事件legendselectchanged
CherryLee_1210的博客
09-20 1万+
这个效果是三个柱子堆叠而成。 data.nian = data.nian.map((item, index) => { return `${item}年` }) let chart = echarts.init(document.getElementById('school-building-chart')) let arr = []; let datas = [] fo...
vue3 + ts + echarts图例点击事件（legendselectchanged事件）
m0_67624022的博客
01-11 1410
在 ECharts 中，可以通过监听图例的点击事件来实现相应的交互。当图例被点击时，可以捕获这个事件并执行相应的操作。 在 legendselectchanged 事件上添加了一个监听器，当图例被点击时，会触发这个事件，可以获取到点击的图例信息，然后执行相应的操作。
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
赏樱看雪撸代码
03-02 1万+
自定义Echarts图例legend点击事件，echarts图标点击事件触发，legendselectchanged应用，echarts多线共存，echarts图例点击调用接口
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目引入echarts 添加点击事件操作
10-14
在Vue项目中，ECharts是一个常用的可视化库，用于创建各种图表。本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这...
echarts 事件与行为
weixin_43931625的博客
11-05 6460
echarts 事件与行为
echars点击图例之后只显示当前数据其他隐藏
_陌默
04-15 1333
经过在官网查看事件后发现最合适的是legendselectchanged事件，该事件在切换图例选中状态时触发。
echarts的legend分为左右两份布局
weixin_68252492的博客
08-18 3138
echarts的legend分为左右两份布局
Echarts图表之带提示框的柱形图可以动态更新legend块名称，以及根据数量设置动态高度
weixin_43923808的博客
07-28 2084
【代码】Echarts图表之带提示框的柱形图可以动态更新legend块名称，以及根据数量设置动态高度。
奇怪的问题-Echarts点击legend更换对应图表
大风起兮云飞扬
05-23 3659
1 问题出现 因项目需要，需要点击对应的图例（legend）再去渲染图表数据。 原始效果图： 出现了所有legend，客户希望出现了所有的图例，但是默认只显示一条数据，点击哪一个legend的则出现对应的折线。 结果效果图： 2 解决 ...
echarts如何判断legend点击哪个
最新发布
07-03
ECharts 是一款强大的数据可视化库，其中的 Legend（图例）用于显示系列是否被选中。如果你想在用户点击 Legend 时获取他们选择的具体信息，你可以使用 ECharts 提供的事件监听功能。 首先，在配置 Legend 时，你需要添加 `data` 属性，这对应着你在图表上显示的数据项，然后启用 `'click'` 事件： ```javascript const legend = { data: ['系列1', '系列2', ...], // 根据你的数据填充 selectedMode: 'single', // 单击选择模式 on: { click: function(name) { // 当图例被点击时触发的回调函数 console.log('用户点击了:', name); // 输出选中的系列名 // 在这里可以根据 name 值执行后续操作 } } }; ``` 当用户点击 Legend 中的一个条目时，`name` 参数将包含他们所点击的数据项名称。你可以在回调函数中处理这个 `name` ，例如改变图表的状态、更新数据等。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值