【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

news2024/11/24 16:03:19

目录

  • 先睹为快（效果）
  • 1、实现Echarts多条曲线
  • 2、点击echarts触发接口请求
    • 2.1 先默认隐藏部分数据
    • 2.2 自定义legend图例点击事件
  • 3、源码下载地址（解压即用）

**【写在前面】**这下我又不得不说了，还是客户现场使用时想查询一周的数据，查询时候发现页面居然要等20多秒，这是个人都得崩溃吧，然后就开始排查这块业务代码模块，主要体现在两个方面：
A.接口请求时间过长(约8秒)，有优化的空间
B.前端一次性调用了四次接口，分别查询了四组数据（需要优化）
正因为有上述B的需求，所以特意针对点击echarts图例点击触发接口调用。

涉及知识点：legendselectchanged、Echarts的legend属性、Echarts图例、legend点击事件、echarts多线共存。

先睹为快（效果）

在这里插入图片描述

【版权声明】因个人创作经常被爬取到其他网站，特此声明，本人暂时只在CSDN平台创作，博主名为：《拄杖盲学轻声码》

1、实现Echarts多条曲线

先实现一个最简单的echarts，多条线一起的曲线图，如下图所示四条线同属一个维度。
在这里插入图片描述

具体实现代码如下：

var resultData1 = {
        status: 200,
        data: {
            data_current: [{
                "value": 143,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 153,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 133,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevone: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 103,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevthree: [{
                "value": 123,
                "record_time": "2022-03-04 12:00:00"
            }, {
                "value": 123,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 223,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 113,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevweek: [{
                "value": 43,
                "record_time": "2022-03-04 11:00:00"
            }, {
                "value": 63,
                "record_time": "2022-03-04 13:00:00"
            }, {
                "value": 66,
                "record_time": "2022-03-04 14:00:00"
            }, {
                "value": 59,
                "record_time": "2022-03-04 15:00:00"
            }, {
                "value": 43,
                "record_time": "2022-03-04 18:00:00"
            }],
            data_pevself: []
        },
        message: ""
    };
    var lineChartBaseInfo = {
        data_current: {
            modulename: '当前值',
            color: '136, 0, 21',
            rangDay: 0,
        },
        data_pevone: {
            modulename: '上个工作日',
            color: '233, 128, 45',
            rangDay: 1,
        },
        data_pevthree: {
            modulename: '前三个工作日',
            color: '54, 93, 251',
            rangDay: 3,
        },
        data_pevweek: {
            modulename: '前一周',
            color: '191, 24, 109',
            rangDay: 7,
        },
        data_pevself: {
            modulename: '自选时间',
            color: '161, 24, 169',
            rangDay: 0,
        },
    }
    var lineCharts = echarts.init(document.getElementById('lineCharts'));
    var _iconPath = "path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z";
    // var _iconPath = "path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z";
    var _icon = 'roundRect';
    var legendData = [], seriesData = []; //定义变量
    var newDataList = {
        data_current: resultData1.data.data_current,
        data_pevone: resultData1.data.data_pevone,
        data_pevthree: resultData1.data.data_pevthree,
        data_pevweek: resultData1.data.data_pevweek,
        data_pevself: resultData1.data.data_pevself,
    };
    //赋值操作
    $.each(newDataList, function (indexInArray, valueOfElement) {
        legendData.push({
            name: lineChartBaseInfo[indexInArray]['modulename'],
            icon: _iconPath
        });
        if (valueOfElement != null) {
            var _data = $.map(valueOfElement, function (val, idx) {
                return {
                    name: new Date(val.record_time).toString(),
                    value: [val.record_time, val.value]
                }
            });
            seriesData.push({
                name: lineChartBaseInfo[indexInArray]['modulename'],
                data: _data,
                type: "line",
                smooth: true,
                // smoothMonotone: "x",
                cursor: "pointer",
                // showSymbol: false,
                itemStyle: { normal: { label: { show: true } } },
                showSymbol: true,
                lineStyle: {
                    shadowColor: "rgba(18,61,172,0.5)",
                    shadowBlur: 10
                }
            })
        }
    });
    var option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        backgroundColor: '#fff',
        title: {
            text: '健康总分(100001)_指标历史曲线',
            textStyle: {
                color: '#666',
                fontSize: 16,
            },
            top: '10px',
            left: '10px',
        },
        legend: {
            data: legendData,
            top: '10px',
            right: '20px',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 10,
            textStyle: {
                color: "#898989",
                lineHeight: 15
            },
            selected: { //在这里设置默认展示就ok了
                '当前值': true,
                '上个工作日': false,
                '前三个工作日': false,
                '前一周': false,
                '自选时间': false
            },
            type: "scroll",
        },
        dataZoom: [{
            type: 'inside',
            show: true,
            xAxisIndex: [0],
        }],
        tooltip: {
            backgroundColor: "#fff",
            trigger: "axis",
            axisPointer: {
                type: "line"
            },
            textStyle: {
                color: "#565656",
                lineHeight: 28
            },
            confine: true,
            padding: 12,
            formatter: function (params) {
            }
        },
        grid: {
            left: 20,
            right: 60,
            top: 60,
            bottom: 20,
            containLabel: true
        },
        xAxis: {
            name: "时间",
            type: "time",
            boundaryGap: true,
            axisLabel: {
                color: "#a0a9bc",
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false

            },
        },
        yAxis: {
            name: "值",
            nameTextStyle: {
                color: "gray"
            },
            type: "value",
            axisLabel: {
                color: "#a0a9bc",
                inside: true,
                margin: 0,
                verticalAlign: "bottom"
            },
            splitLine: {
                lineStyle: {
                    type: "dashed"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        series: seriesData
    };
    lineCharts.clear();
lineCharts.setOption(option);

这个是在所有数据返回速度很快的情况下可以直接拿到的，但是如果数据量过于庞大，那么对页面来说直接拿4条数据的过程无疑是个漫长的等待。

2、点击echarts触发接口请求

2.1 先默认隐藏部分数据

设置legend的selected属性，将当天的设置为true，其他的设置为false即可，设置完后如下所示：
在这里插入图片描述

selected: { 
//在这里设置默认展示就ok了
          '当前值': true,
          '上个工作日': false,
          '前三个工作日': false,
          '前一周': false,
          '自选时间': false
},

2.2 自定义legend图例点击事件

首先说一下这边用到的图例点击事件为legendselectchanged，但是在触发前记得加上off，主要目的就是为了防止二次触发，和click事件一样。如下所示应用：
lineCharts.off(‘legendselectchanged’).on(‘legendselectchanged’, function (params) {
//触发后执行的内容
});
也就是在这个执行内容里面我们可以调用接口，从而实现echarts点击图例触发接口调用的目的。
具体实现效果如下：
在这里插入图片描述

具体实现代码如下：

lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) {
            //调用接口调整源数据
            debugger;
            var _pevType = 0;
            if (params.selected[params.name]) {
                //表示true
                if (params.name.indexOf("上个工作") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("当前") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("周") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                } else if (params.name.indexOf("三") > -1) {
                    layer.msg("长得帅的黄大大点击了:" + params.name);
                    //此处可以调用接口查询数据
                }
            } else {
                //表示false，隐藏
            }
            console.log('点击了', params.name);
            // do something
        });

3、源码下载地址（解压即用）

百度网盘提取地址：
链接：https://pan.baidu.com/s/1bm50Dbq-AqZkuqgIgrUlgw
提取码：hdd6

123网盘提取地址（不限速）
链接：https://www.123pan.com/s/ZxkUVv-dFJ4.html
提取码：hdd6

喜欢博主的这篇文章的可以上皇榜支持一下博主哟！！！皇榜入口点击此处

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/383952.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

宽度学习系统BLS推广到在线学习的论文阅读记录

宽度学习系统BLS推广到在线学习的论文阅读记录

BELS: A BROAD ENSEMBLE LEARNING SYSTEM FOR DATA STREAM CLASSIFICATION 摘要：这篇文章主要是将BLS推广到适用于在线学习的邻域，提出了其如何进行适合在线学习的增量更新，以及面对概念漂移的适应 所提出的算法BELS 稀疏特征映射的更新 …
阅读更多...
【牛客网刷题记录】，后面遇到的一些问题都会在这里记录，欢迎大家批评指正

【牛客网刷题记录】，后面遇到的一些问题都会在这里记录，欢迎大家批评指正

文章目录数据结构篇数组字符串链表树图堆算法篇哈希查找排序数据库篇SQL语言篇数据结构篇 数组 省流： 计算二维数组指定元素的位置压缩矩阵 1. 执行以下代码段(程序已包含所有必需的头文件)会输出什么结果。 char a[] "abcd", b[10] "abcd"…
阅读更多...
被围绕的区域

被围绕的区域

题目链接 leetcode——在线链接 题目描述 给你一个 m x n 的矩阵 board ，由若干字符 ‘X’ 和 ‘O’ ，找到所有被 ‘X’ 围绕的区域，并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 题目示例 输入：board [[“X”,“X”,“X”,…
阅读更多...
德标1.4571合金元素钛的影响

德标1.4571合金元素钛的影响

1.45711.4571介绍：1.4571在316的基础上加入了钛，为解决316晶间腐蚀发展起来的钢种，有良好的耐晶间腐蚀性能，在稀H2SO4、H3PO4及有机酸和海洋大气中耐蚀性能有所提高。其它性能和316相近。◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆…
阅读更多...
【项目实战】为什么我选择使用CloseableHttpClient，而不是HttpClient，他们俩有什么区别？

【项目实战】为什么我选择使用CloseableHttpClient，而不是HttpClient，他们俩有什么区别？

一、HttpClient介绍 HttpClient是Commons HttpClient的老版本，已被抛弃，不推荐使用； HttpClient是一个接口，定义了客户端HTTP协议的操作方法。 它可以用于发送HTTP请求和接收HTTP响应。 HttpClient接口提供了很多方法来定制请求…
阅读更多...
RK3288-android8-IR-选不中小窗口

RK3288-android8-IR-选不中小窗口

IR红外功能,多么基础的功能,但是说来也不简单 因为,小小的红外看似基础,实则设计太多东西了, 从关机涉及Uboot;到内核kernel键码上报;到android键码的实现,小小的功能涉及大大的范围; (101条消息) rk3288-android8-IR-mouse_旋风旋风的博客-CSDN博客 大家可以看一下我之前的…
阅读更多...
考研复试——数据结构

考研复试——数据结构

文章目录数据结构什么是数据结构？逻辑结构和物理结构有什么区别？为什么对单链表设置头结点？算法的特点？常见的数据结构有哪些？栈在后缀表达式求值的算法思想：队列溢出现象？解决方法？…
阅读更多...
【项目精选】基于Java的超级玛丽游戏的设计与实现（源码+论文+视频）

【项目精选】基于Java的超级玛丽游戏的设计与实现（源码+论文+视频）

点击下载源码 超级玛丽小游戏的JAVA程序，进入游戏后首先按空格键开始，利用方向键来控制的马里奥的移动，同时检测马里奥与场景中的障碍物和敌人的碰撞，并判断马里奥的可移动性和马里奥的生命值。当马里奥通过最后一个场景后游戏结束…
阅读更多...
项目经理如何管理好自己的时间

项目经理如何管理好自己的时间

由于项目各种不定因素的存在，有时侯我们看到有些项目经理虽然成天忙得焦头烂额，但绩效甚微也就不足为怪了，如何能让宝贵的时间花在“刀刃”上，抓住了问题的要害，才能使工作事半功倍。 1、做好工作计划 项目经理比较擅…
阅读更多...
目前已经有80多万个数据库迁移到了亚马逊云科技上

目前已经有80多万个数据库迁移到了亚马逊云科技上

Gartner是全球最具权威的IT研究公司，在IT研究领域可以说是无人不知、无人不晓。它每年都会发布各种IT产业评测报告，分析未来技术发展，帮助客户进行市场分析、技术选择、投资决策。最近看到Gartner发布的云数据库魔力象限报告，这也…
阅读更多...
安装包UI美化之路-nsNiuniuSkin安装包模板介绍

安装包UI美化之路-nsNiuniuSkin安装包模板介绍

今天这篇文章，咱们不做功能讲解了，来介绍一下nsNiuniuSkin的几套安装包模板的UI效果和设计理念！ 前言 经常有朋友会问，nsNiuniuSkin的几套模板都有些什么区别呀，我拿到模板后，如果要换成我们自己的UI方便…
阅读更多...
Java on VS Code 2月更新｜JUnit 5 并行测试与 Spring Boot 插件的过滤功能

Java on VS Code 2月更新｜JUnit 5 并行测试与 Spring Boot 插件的过滤功能

作者：Nick Zhu - Senior Program Manager, Developer Division at Microsoft 排版：Alan Wang 大家好，欢迎来到我们的二月更新！在此博客中，我们将为您带来与 JUnit 5 并行测试相关的新功能以及用于 Spring Boot Dashboa…
阅读更多...
【java基础】万字说明，一篇文章彻底搞懂java中的lambda表达式

【java基础】万字说明，一篇文章彻底搞懂java中的lambda表达式

文章目录lambda表达式是什么lambda表达式的语法函数式接口初次使用深入理解方法引用 :: 用法快速入门不同形式的::情况1 object::instanceMethod情况2 Class::instanceMethod情况3 Class::staticMethod对于 :: 的一些示例及其注意事项构造器引用变量作用域使用外部变量定义内部…
阅读更多...
华为机试题：HJ96 表示数字（python）

华为机试题：HJ96 表示数字（python）

文章目录（1）题目描述（2）Python3实现（3）知识点详解1、input()：获取控制台（任意形式）的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方…
阅读更多...
软件成分安全分析（SCA）能力的建设与演进

软件成分安全分析（SCA）能力的建设与演进

**前言 ** 随着 DevSecOps 概念的逐渐推广和云原生安全概念的快速普及，研发安全和操作环境安全现在已经变成了近两年行业非常热的词汇。在研发安全和应急响应的日常工作中，每天都会收到大量的安全风险信息，由于目前在系统研发的过程中&#…
阅读更多...
【反序列化漏洞-02】PHP反序列化漏洞实验详解

【反序列化漏洞-02】PHP反序列化漏洞实验详解

为什么要序列化百度百科上关于序列化的定义是，将对象的状态信息转换为可以存储或传输的形式(字符串)的过程。在序列化期间，对象将其当前状态写入到临时或持久性存储区(非关系型键值对形式的数据库Redis，与数组类似)。以后，可以通过…
阅读更多...
2023新版PMP考试有哪些变化？

2023新版PMP考试有哪些变化？

对于2022年很多事情也都在发生，疫情也都没有完全结束，基金会已经开始通知下一场考试了，很多人也会担心新的考纲会不会给自己带来难度，其实这次六月份的考试很多人都内心已经知道了结果，所以这里也详细说一下新考纲的改…
阅读更多...
大数据之Apache Doris_亚秒级响应_大数据处理分析_介绍_概述---大数据之Apache Doris工作笔记0001

大数据之Apache Doris_亚秒级响应_大数据处理分析_介绍_概述---大数据之Apache Doris工作笔记0001

可以看到这个Doris的介绍 MPP是大规模并行处理 这里的clickhouse ,greenplumn也是mpp,大规模并行处理数据库 应用场景 然后我们看一下doris的架构,可以看到,这里,左侧是数据来源,可以看到这个数据来源有 OLTP数据库,比如mysql,oracle等等这种数据库,还有就是enterprise appli…
阅读更多...
Supporting Clustering with Contrastive Learning笔记

Supporting Clustering with Contrastive Learning笔记

这篇文章使用了对比学习进行了聚类，一种端到端的离线聚类模型。 主要流程 Feature model 比较主流的句向量编码器SBERT。本文主要使用两个损失函数去微调SBERT的参数。使得SBERT的生成的特征表示具有以下两个特点： 簇间距离拉大（inter-cl…
阅读更多...
并发编程(2)—Java 对象内存布局及 synchornized 偏向锁、轻量级锁、重量级锁介绍

并发编程(2)—Java 对象内存布局及 synchornized 偏向锁、轻量级锁、重量级锁介绍

一、Java 对象内存布局 1、对象内存布局 一个对象在 Java 底层布局（右半部分是数组连续的地址空间），如下图示： 总共有三部分总成： 1. 对象头：储对象的元数据，如哈希码、GC 分代年龄、锁状态…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023