eCharts图表点击事件(柱形、label),获取选择项的下标及值

news2024/9/17 7:34:01

获取选则项的值的话,打印params就能找到了,故主要说明找到对应下标的情况。

柱形点击事件

简单代码

this.myChart = echarts.init(this.$refs.chartbox1);
this.myChart.off("click");
this.myChart.on("click", (params) => {
	console.log("params", params);
});

打印的结果:
在这里插入图片描述
dataIndex为选择性的下标

存在问题

在某一柱形数据为0时,则无法点击当前项
在这里插入图片描述

label点击事件

网上很多用convertFromPixel获取坐标,但是实际使用却经常计算不准确,现采取label计数的方式获取

this.myChart = echarts.init(this.$refs.chartbox1);
this.myChart.off("click");
this.myChart.on("click", (params) => {
	console.log("params", params);
    let dataIndex = params.dataIndex; // 直接点击柱形
    if (!dataIndex && dataIndex !== 0 && params.targetType === "axisLabel" && params.event.target.anid.includes("label_")) {
    	// 点击x轴label
        dataIndex = Number(params.event.target.anid.split("_")[1]);
    }
    if (parseInt(dataIndex) === dataIndex) {
        // dataIndex 为选择项的下标
    }
});

开启label选择

xAxis: {
	triggerEvent: true,
	...
}

打印的结果:
在这里插入图片描述

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

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

相关文章

4.4 MySQL存储1

1、使用前提 安装MySQL数据库,安装pymysql第三方库。 2、使用连接数据库最初步骤 (1) 声明一个连接对象。使用connect()方法声明一个连接对象conn,参数为数据库的一些信息。依次为主机名、用户名、密码、端口号; (2) 获得游标。使用cursor…

intellij idea创建spring项目时没有java 8

一、 引入 当我们用file–》new–》project创建一个项目时,会遇到下面的情况(如图二所示), 图一 图二 java版本仅有21和17可选,而国内大部分还在用java 8 版本,会导致项目无法启动。 二、解决办法 点击serverUrl进…

mysql-多表查询-外连接

一、外连接查询语法 (1)左外连接 select 所要查询的内容 from 左表 left outer join 右表 on 条件; (2)右外连接 select 所要查询的内容 from 左表 right outer join 右表 on 条件; 二、示例 用以下两张表示例 左外连接 右外…

3.测试教程 - 基础篇

文章目录 软件测试的生命周期软件测试&软件开发生命周期如何描述一个bug如何定义bug的级别bug的生命周期如何开始第一次测试测试的执行和BUG管理产生争执怎么办(处理人际关系) 大家好,我是晓星航。今天为大家带来的是 测试基础 相关的讲解…

戏曲文化苑|戏曲文化苑小程序|基于微信小程序的戏曲文化苑系统设计与实现(源码+数据库+文档)

戏曲文化苑小程序目录 目录 基于微信小程序的戏曲文化苑系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 (1)戏曲管理 (2)公告信息管理 (3)公告类型管理…

开源免费大模型框架自己训练可根据关键词提示绘图的软件

开源免费大模型框架自己训练可根据关键词提示绘图的软件!大家都知道,市面上那些可以支持这种业务的大模型都是收费的,如果你是一个资深的大模型爱好者,并且有自己的打算和预算,想自己训练一套属于自己的大模型软件来完成日常的绘图…

什么是MapReduce

1.1 MapReduce到底是什么 Hadoop MapReduce是一个软件框架,基于该框架能够容易地编写应用程序,这些应用程序能够运行在由上千个商用机器组成的大集群上,并以一种可靠的,具有容错能力的方式并行地处理上TB级别的海量数据集。这个定…

编程学习线上提问现场解答流程,零基础学编程从入门到精通

编程学习线上提问现场解答流程 一、前言 之前给大家分享的一款中文编程工具,越来越多的学员使用这个工具学习编程。 在学习中有疑难问题寻求解答流程 1、可以在本平台留言或发私信联系老师 2、可以在群提问及时解答问题 3、通过线上会议的方式,电脑…

2024年必备原型设计工具盘点,助你成为设计大神

原型设计是 UI/UX 设计中至关重要的一步,就像用户体验中的其他环节一样,有无数的原型工具可以帮助你完成原型设计。 如果市场上有太多的原型设计工具让你不知所措,不知道选择哪一个,恭喜你,这个原型设计工具的集合是为…

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd, mysql,redis,建议采用docker安装。 MySQL安装好之后,新建数据库dsms_admin,并新建表sys_user&#…

openEuler安装MySQL客户端、openEuler安装MySQL-client、openEuler部署MySQL-client

MySQL客户端下载链接:https://downloads.mysql.com/archives/community/ mysql-community-client-5.7.30-1.el7.x86_64.rpm mysql-community-common-5.7.30-1.el7.x86_64.rpm mysql-community-libs-5.7.30-1.el7.x86_64.rpm 3个必选 8.0.22以上的版本是4个&…

个人博客系列-项目部署-nginx(3)

使用Nginx uwsgi进行部署django项目 一. 检查项目是否可以运行 启动项目 python manage.py runserver 0.0.0.0:8099输入ip:8099 查看启动页面 出现上述页面表示运行成功 二. 安装uwsgi并配置 2.1 下载uwsgi pip install uwsgi新建文件test.py写入内容,测试一…

Python算法题集_图论(课程表)

Python算法题集_课程表 题207:课程表1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【循环递归全算】2) 改进版一【循环递归缓存】3) 改进版二【循环递归缓存反向计算】4) 改进版三【迭代剥离计数器检测】 4. 最优算法5. 相关资源 本…

GaussDB SQL调优:建立合适的索引

背景 GaussDB是华为公司倾力打造的自研企业级分布式关系型数据库,该产品具备企业级复杂事务混合负载能力,同时支持优异的分布式事务,同城跨AZ部署,数据0丢失,支持1000扩展能力,PB级海量存储等企业级数据库…

Rust之构建命令行程序(四):用TDD(测试-驱动-开发)模式来开发库的功能

开发环境 Windows 11Rust 1.75.0 VS Code 1.86.2 项目工程 这次创建了新的工程minigrep. 用测试-驱动模式来开发库的功能 既然我们已经将逻辑提取到src/lib.rs中,并将参数收集和错误处理留在src/main.rs中,那么为代码的核心功能编写测试就容易多了。我…

CSS轻松学:简单易懂的CSS基础指南

css基础 更多web开发知识欢迎访问我的专栏>>> 01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)。 书写位置:…

揭秘抖音自动评论软件的使用方法和步骤

**一、引言** 随着移动互联网的普及,抖音已经成为了人们日常生活中不可或缺的一部分。为了更好地利用抖音,我们今天就来探讨一下抖音自动评论软件的使用方法和步骤。本文将通过通俗易懂的语言,结合实际操作,帮助大家轻松掌握这一…

springboot网站开发0201-使用MybatisPlus查询数据库信息返回前端渲染

springboot网站开发0201-使用MybatisPlus查询数据库信息返回前端渲染!这一次我们将会详细的展示一个完整的数据库查询案例,从查询数据库到返回前端渲染页面完成一个流程。 首先,我们需要清楚,本次业务需求是,查询新闻分…

Android 仿信号格子强度动画效果实现

效果图 在 Android 中,如果你想要绘制一个圆角矩形并使其居中显示,你可以使用 Canvas 类 drawRoundRect 方法。要使圆角矩形居中,你需要计算矩形的位置,这通常涉及到确定矩形左上角的位置(x, y)&#xff0…

【kubernetes】二进制部署k8s集群之cni网络插件flannel和calico工作原理(中)

↑↑↑↑接上一篇继续部署↑↑↑↑ 目录 一、k8s集群的三种接口 二、k8s的三种网络模式 1、pod内容器之间的通信 2、同一个node节点中pod之间通信 3、不同的node节点的pod之间通信 Overlay Network VXLAN 三、flannel网络插件 1、flannel插件模式之UDP模式&#xff0…