echarts的click事件

news2024/11/18 10:48:10

目录

前言

一、click事件


前言

在使用echarts的过程中,最常用的则是不同系列所对应的click返回参数的不同

一、click事件

在以下图中,其实是两个不同系列的数据,一个是图中的钟表,一个是下面的图

                    const option = {
                        grid: {
                            left: 25,
                            top: 25,
                            right: 25,
                            bottom: 0,
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'none',
                            },
                            formatter: '{b}:{c}人',
                        },
                        xAxis: {
                            data: this.data.xAxisData,
                            axisTick: { show: false },
                            axisLine: { show: false },
                            axisLabel: {
                                interval: 0,
                                color: 'rgba(255,255,255, 0.8)',
                            },
                        },
                        yAxis: {
                            splitLine: { show: false },
                            axisTick: { show: false },
                            axisLine: { show: false },
                            axisLabel: { show: false },
                        },
                        color: ['#e54035'],
                        series: [
                            {
                                name: 'education',
                                type: 'pictorialBar',
                                barCategoryGap: '-130%',
                                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                                itemStyle: {
                                    opacity: 0.5,
                                },
                                emphasis: {
                                    //高亮
                                    itemStyle: {
                                        opacity: 1,
                                    },
                                },
                                data: this.data.list,
                                z: 10,
                            },
                            {
                                name: 'glyph',
                                type: 'pictorialBar',
                                barGap: '-100%', //让两个柱子重叠
                                symbol: 'image://../../assets/images/data-screen/time.png',
                                symbolPosition: 'end', //让图形与柱子外切
                                symbolSize: 20, //长宽都为50
                                symbolOffset: [0, '-120%'], //偏移量 x,y轴
                                data: this.data.list,
                            },
                        ],
                    };
                    this.echartsElement.setOption(option);

给系列1的z设置为10,值越大则离屏幕越近 

根据点击事件的返回参数所示,当点击系列图为钟表形状时,此时seriesIndex为1

 而点击下面的图形时,此时返回seriesIndex为0

此时如果想要点击seriesIndex为0触发点击时间则可以写为

 this.echartsElement.on('click', (params: any) => {
                        if (params.seriesIndex == 0) {
                        }
                    });

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

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

相关文章

Visual Studio软件_MSC_VER值(MSVC编译器版本)的获取方法

本文介绍查看Visual Studio软件_MSC_VER值的方法。 _MSC_VER是微软公司推出的C/C 编译器——MSVC编译器的一个内置宏,其值表示当前Visual Studio软件中MSVC编译器的具体版本。不同的Visual Studio软件版本对应着不同的MSVC编译器版本——无论是不同发布年份的版本&…

RT-Thread程序内存分布

一般MCU包含的存储空间有:片内Flash与片内RAM,RAM相当于内存,Flash相当于硬盘。 编译器会将一个程序分类分为好几个部分,分别存储在MCU不同的存储区。 Keil工程在编译完之后,会有相应的程序占用的空间提示信息。 lin…

螺旋矩阵、旋转矩阵、矩阵Z字打印

螺旋矩阵 #include <iostream> #include <vector> void display(std::vector<std::vector<int>>&nums){for(int i 0; i < nums.size(); i){for(int j 0; j < nums[0].size(); j){std::cout<<nums[i][j]<< ;}std::cout<<…

【SpringSecurity】八、集成图片验证码

文章目录 1、生成图片验证码2、创建验证码过滤器3、将过滤器加入SpringSecurity过滤链4、修改登录页 SpringSecurity是通过过滤器链来完成的&#xff0c;接下来的验证码&#xff0c;可以尝试创建一个过滤器放到Security的过滤器链中&#xff0c;在自定义的过滤器中比较验证码。…

Linux系统下Web文件系统搭建

背景 为了方便和协作者共享文件和方便文件统一管理及下载&#xff0c;比如分享API文档&#xff0c;因此搭建一个简易的基于Apache服务的Web文件系统&#xff0c;使用浏览器进行文件访问及下载。 部署Apache服务器 本文的linux开发环境是Ubuntu 18.04 安装 sudo apt instal…

Collections和CollectionUtils集合操作

0.引入依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-collections4</artifactId><version>4.4</version> </dependency> 一.Collections用法&#xff1a; 01、排序操作 reverse(List list)…

C++面试题(丝)-计算机网络部分(1)

目录 1计算机网络 53 简述epoll和select的区别&#xff0c;epoll为什么高效&#xff1f; 54 说说多路IO复用技术有哪些&#xff0c;区别是什么&#xff1f; 55 简述socket中select&#xff0c;epoll的使用场景和区别&#xff0c;epoll水平触发与边缘触发的区别&#xff1f;…

学术加油站|基于端到端性能的学习型基数估计器综合测评

编者按 本文系东北大学李俊虎所著&#xff0c;也是「 OceanBase 学术加油站」系列第 11 篇内容。 「李俊虎&#xff1a;东北大学计算机科学与工程学院在读硕士生&#xff0c;课题方向为数据库查询优化&#xff0c;致力于应用 AI 技术改进传统基数估计器&#xff0c;令数据库选…

第五章 树与二叉树 五、哈夫曼树(定义与构造方法),哈夫曼编码

一、带权路径长度 1.结点的权:有某种现实含义的数值&#xff08;如:表示结点的重要性等&#xff09; 2.结点的带权路径长度:从树的根到该结点的路径长度(经过的边数&#xff09;与该结点上权值的乘积。 3.树的带权路径长度:树中所有叶结点的带权路径长度之和。&#xff08;W…

740914L、740928LD、740912D插头式比例控制线圈放大器

740912、740912D、740912L、740912LD 740914、740914D、740914L、740914LD 740924、740924D、740924L、740924LD 740928、740928D、740928L、740928LD 770212、770214、770214N、770223 一般情况下选用的线圈&#xff0c;在工作的工程中&#xff0c;一般是不可能发生问题的…

关于PMP!被问到发疯的10个问题!!

最近很多人都在问我PMP证书相关的几个问题&#xff0c;我大致整理出来&#xff0c;统一回答。 1&#xff09;这是个什么证书&#xff1f;2&#xff09;到底有什么用&#xff1f;3&#xff09;考下来需要多少钱&#xff1f;4&#xff09;能不能不报班自己学&#xff1f;5&#…

【HarmonyOS】一文教你如何使用低代码平台网格布局动态加载数据

【关键字】 低代码平台、AGC、API6、网格布局、数据模型 【写在前面】 正式开工之前&#xff0c;先来说一下今天要实现的内容&#xff0c;今天会实现一个网格布局的展示&#xff0c;我会创建一个数据模型&#xff0c;然后网格列表的数据从数据模型中获取&#xff0c;从而实现…

固定资产管理措施怎么写

固定资产管理措施是指企业在进行固定资产管理时所采取的各种措施和方法。以下是一些常见的固定资产管理措施&#xff1a;  建立完善的固定资产管理制度。制定明确的资产采购、使用、维护、报废等流程和标准&#xff0c;确保资产管理的规范性和透明度。  采用先进的资产管理…

在 .NET 8 Preview 7 中推出 .NET MAUI:键盘加速键

作者&#xff1a;David Ortinau 排版&#xff1a;Alan Wang .NET MAUI 现已在 .NET 8 Preview 7 中推出&#xff0c;它引入了键盘加速键以及更多的修复和改进。这是我们发布 .NET 8 候选版本和正式发布&#xff08;GA&#xff09;版本之前的最后一个预览版本。随着发布日期的公…

六、DataGrip的基础使用

创建新数据库 1、点击MySQL图标&#xff0c;右键点击新建&#xff0c;然后选择框架(数据库) 2、输入数据库名称&#xff1a; 此处schema代表框架&#xff0c;和database(数据库)是同一性质的东西。 创建新的表 1、右键点击数据库&#xff0c;点击新建&#xff0c;再点击表 2…

设计模式-装饰模式

文章目录 一、简介二、基本概念三、装饰模式的结构和实现类图解析&#xff1a;装饰器的实现方式继承实现&#xff1a;组合实现&#xff1a;继承和组合对比 四、装饰模式的应用场景五、与其他模式的关系六、总结 一、简介 装饰模式是一种结构型设计模式&#xff0c;它允许动态地…

黑客常用的10大工具介绍

黑客技术一度被认为是一个神秘的特有领域&#xff0c;随着技术的进步和领域环境的进步&#xff0c;它已经成为一种非常普遍的现象。黑客技术可以用于有害目的&#xff0c;也可以用于发现系统中的漏洞&#xff0c;并通知系统属主&#xff0c;帮助他们更好地保护系统。 借助于一些…

【【萌新的STM32学习--24 USART的部分介绍】】

萌新的STM32学习–24 USART的部分介绍 STM32的USART的介绍 USART 英文解释是 通用同步异步收发器 UART 通用异步收发器 USART/UART 都可以与外部设备进行全双工异步通信 USART 我们常用的也是异步通信 USART 主要特征 1.全双工异步通信 2.单线半双工通信 3.单独的发送器和接…

股市里面怎么加杠杆?买股加杠杆如何应对市场波动与风险?

股市里面怎么加杠杆&#xff1f;买股加杠杆如何应对市场波动与风险&#xff1f;首先&#xff0c;让我们讨论如何在股市中加杠杆。主要有一下两种方式&#xff1a; 1. 通过杠杆交易平台&#xff1a;许多券商和金融机构提供杠杆交易平台。 2. 通过杠杆型交易基金&#xff1a;杠…

在QGIS中手动输入坐标文本添加点状矢量要素的一种方法

目录 一、前言 二、应用场景 三、实现思路 四、实验过程 1、创建一个临时矢量图层 2、给矢量图层新增要素 3、给新增要素的几何图形赋值 4、查看要素的几何图形 五、实验总结 一、前言 本文主要为QGIS点状矢量数据编辑方面的内容&#xff0c;不涉及编程方面。我们知道大…