vue中echarts柱状图点击x轴数据复制

news2024/12/23 10:06:19

参考自:Vue 3 使用 vue-echarts 的柱状图 barItem 和 x, y 轴点击事件实现_echarts x轴点击事件-CSDN博客

例如柱状图如下:

步骤:

一、数据处理的时候需要在 xAxis 对象中添加:triggerEvent: true 这个键值对,以增加x轴在 @click中的事件响应

二、在图表上添加点击事件

 <v-chart ref="echarts" 
:auto-resize="true" 
:options="monitTimeoutStatEcharts"  
@click="clickBarInBarChart"/>

 在methods中声明该方法,并且打印参数params

    clickBarInBarChart(params){
      console.log(params);
    },

三、当我们点击x轴下方数值的时候,在控制台打印参数params,需要的值在event中找,发现在value字段中,那么就直接调用复制方法。

警告:但是如果我们点击柱状图中的柱状体 ,如下图蓝色位置,即可发现报错消息为:[Vue warn]: Error in event handler for "click": "TypeError: Cannot read properties of undefined (reading 'value')" 可知,是我们点击的位置上并没有我们想要的value字段

 

所以打印params查找我们需要的数据在哪个字段里,发现在name字段当中,所以要进行一个点击位置的判断(放最后代码里)

四、复制的方法 

    async copyActivityLink(id) {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", id);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$message.success("复制成功");
      } else {
        this.$message.error("复制失败");
      }
      document.body.removeChild(input);
    },

五、在图表对应的点击事件中调用复制方法,传递参数为你想要的参数值,即可实现复制

    clickBarInBarChart(params){
      if(params.componentType == 'xAxis'){
        this.copyActivityLink(params.event.target.eventData.value,'echarts')
      }else{
        this.copyActivityLink(params.name,'echarts')
      }
    },

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

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

相关文章

ES索引误删的名场面

慌了3秒&#xff0c;果断发个邮件&#xff1b; 01 最近&#xff0c;在版本发布时&#xff1b; ES线上未备份的索引&#xff0c;被当场「误删」了&#xff1b; 对于新手来说&#xff0c;妥妥的社死名场面&#xff1b; 对于老手来说&#xff0c;慌它3秒表示一下态度&#xff1…

Python3,100行代码,写一段新年祝福视频,为新年喝彩。

新年祝福 1、引言2、代码示例2.1 思路2.2 介绍2.2.1 画布2.2.2 用法 2.3 实例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; 这2023年马上就结束了&#xff0c; 是不是要表示表示。 小鱼&#xff1a;我也在思考这个事情。 小屌丝&#xff1a;这还需要思考&#xff1f;…

kubernetesr安全篇之云原生安全概述

云原生 4C 安全模型 云原生 4C 安全模型&#xff0c;是指在四个层面上考虑云原生的安全&#xff1a; Cloud&#xff08;云或基础设施层&#xff09;Cluster&#xff08;Kubernetes 集群层&#xff09;Container&#xff08;容器层&#xff09;Code&#xff08;代码层&#xf…

modelsim使用技巧

Modelsim关闭Add items to the Project后&#xff0c;该如何添加existing file&#xff1a; 在project页面下&#xff0c;右键选择add to project-add existing file 设置modelsim的仿真波形时间单位&#xff1a; 打开Modelsim后&#xff0c;在Wave-Wave Preferences后&#…

从零开始学习Web自动化:用Python和Selenium实现网站登录功能!

Web自动化测试实战项目&#xff1a;使用Selenium和Python完成网站登录功能的自动化测试 本文将介绍如何使用Selenium和Python编写自动化测试脚本&#xff0c;对网站登录功能进行测试。我们将通过模拟用户在网站上输入用户名和密码&#xff0c;并点击登录按钮&#xff0c;来检验…

JavaWeb编程语言—登录校验

一、前言&简介 前言&#xff1a;小编的上一篇文章“JavaWeb编程语言—登录功能实现”&#xff0c;介绍了如何通过Java代码实现通过接收前端传来的账号、密码信息来登录后端服务器&#xff0c;但是没有实现登录校验功能&#xff0c;这代表着用户不需要登录也能直接访问服务器…

设计模式 原型模式 与 Spring 原型模式源码解析(包含Bean的创建过程)

原型模式 原型模式(Prototype模式)是指&#xff1a;用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型&#xff0c;创建新的对象。 原型模式是一种创建型设计模式&#xff0c;允许一个对象再创建另外一个可定制的对象&#xff0c;无需知道如何创建的细节。 工作原…

技术分享-Jenkins

持续集成及Jenkins介绍 软件开发生命周期叫SDLC&#xff08;Software Development Life Cycle&#xff09;&#xff0c;集合了计划、开发、测试、部署过程。 在平常的开发过程中&#xff0c; 需要频繁地&#xff08;一天多次&#xff09;将代码集成到主干&#xff0c;这个叫持…

电子烟单片机方案开发,32位单片机PY32F030电子烟解决方案

电子烟是一种低压的微电子雾化设备。可以通过加热液体产生雾状物质&#xff0c;供用户吸入使用的新型电子产品。它是由微控制器&#xff08;MCU&#xff09;、超声波雾化发生器、充电管理IC、锂离子电池、发热棒等器件构成&#xff0c;主要用于替代传统香烟和戒烟&#xff0c;与…

一文读懂什么是智能工厂?

引言 在当今快速变革的制造业中&#xff0c;智能工厂如一盏明灯&#xff0c;照亮着未来生产的道路。它们不仅代表着技术的进步&#xff0c;更是制造业向前迈进的里程碑。智能工厂利用先进的技术和创新方法&#xff0c;将传统工厂转化为高度自动化、数字化和智能化的生产中心。…

13英寸MacBook Pro停产后 Touch Bar功能被废弃

新款M3 MacBook Pro的发布标志着苹果13英寸MacBook Pro正式停产。这款13英寸MacBook Pro是最后一款搭载Touch Bar的苹果笔记本&#xff0c;这意味着苹果已经放弃了使用Touch Bar。 Touch Bar是一块OLED触控显示屏&#xff0c;位于MacBook Pro键盘的顶部。尽管苹果对它抱有很高的…

MyBatis的查询方法!!!

准备工作&#xff1a;1.创建一个maven工程&#xff0c;然后将pojo类导入到项目中去。 2.导入依赖到pom.xml文件中 3.在resources中创建log4j.properites和mybatis-config.xml 4.创建UserMapper接口和UserMapper.xml文件 5.创建测试类MyBatisTest 1.创建Maven工程&#xff0c;还…

蓝桥杯嵌入式——串口

CUBE里配置成异步模式&#xff0c;设置波特率&#xff0c;打开中断&#xff08;先配置LCD再配置串口&#xff09;&#xff1a; 串口发送 main.c #include "string.h" char temp[20]; sprintf(temp,"Hello World\r\n"); HAL_UART_Transmit(&huart1,(…

绝地求生是国际服吗?

绝地求生&#xff08;PlayerUnknowns Battlegrounds&#xff0c;简称PUBG&#xff09;是一款多人在线的生存竞技类游戏&#xff0c;由韩国的蓝洞公司开发和发行。该游戏于2017年正式发布&#xff0c;以其创新的游戏模式和激烈的战斗场景迅速走红全球&#xff0c;并成为全球最具…

魔众文库系统v5.8.0版本发布:水印、分类与移动端升级,打造更高效文档管理体验

魔众文库系统迎来了全新的v5.8.0版本更新&#xff01;此次更新不仅对水印功能进行了升级&#xff0c;还新增了辅助分类样式&#xff0c;同时优化了移动端体验。让我们一起来看看这次更新的亮点吧&#xff01; 一、水印功能全新升级 在v5.8.0版本中&#xff0c;魔众文库系统的…

Java实现一个在windows环境下的文件搜索引擎

以下是一个简单的Java实现的Windows文件搜索引擎的示例代码&#xff1a; import java.io.File; import java.util.ArrayList; import java.util.List;public class FileSearchEngine {public static void main(String[] args) {String searchDirectory "C:/"; // …

element plus 日期范围 自定义内容

问题&#xff1a; 按照官网上的自定义内容示例&#xff0c;修改日期选择器没有问题&#xff0c;如果修改日期范围选择器&#xff0c;修改后会丢失日期范围选择时的样式。 解决&#xff1a; 从F12中不难看出日期范围的选择样式来自于.el-date-table-cell 而示例中写的是.cell&…

23--数据结构简述

常见的数据结构 数据存储的常用结构有&#xff1a;栈、队列、数组、链表和红黑树。 1、栈 特点&#xff1a;先进后出 2、队列 特点&#xff1a;先进先出 3、数组 数组特点&#xff1a;查询快 &#xff0c; 增删慢 整形数组&#xff1a; 对象数组&#xff1a; 4、链表 链…

案例分享|企业为什么要选择数字化转型?

数字化在现代社会中扮演着重要的角色&#xff0c;成为企业转型的必由之路。随着科技的发展和信息化的进程&#xff0c;越来越多的企业开始拥抱数字化转型&#xff0c;以应对市场的变化和竞争的压力。数字化带来了诸多好处&#xff0c;不仅提高了企业的效率和生产力&#xff0c;…

阿里云登录镜像仓库报错: Error response from daemon: Get https://

阿里云登录镜像仓库报错: Error response from daemon: Get https:// 1. 故障现象 开发反应自用笔记本连接镜像仓库是正常的,但通过服务器连接镜像仓库一直失败. 报错信息如下: Error response from daemon: Get https://registry.cn-hangzhou.aliyuncs.com/v2/: unauthoriz…