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

参考自: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.rhkb.cn/news/220369.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode如何开发微信小程序?(保姆级教学)

1.安装“微信小程序开发工具”扩展 2.安装“vscode weapp api”扩展 3.安装“vscode wxml”扩展 4.安装“vscode-wechat”扩展 5.在终端执行命令&#xff1a; vue create -p dcloudio/uni-preset-vue uniapp-test uniapp-test就是我这里的项目名称了 6.如果遇到了这个错误&a…

构建平战结合的融合通信指挥调度系统平台

华脉智联PTTLINK融合通信指挥调度系统将语音、视频、GIS进行高度融合&#xff0c;构建“平战结合”的指挥调度模式&#xff0c;既满足平时的日常办公、会议会商、应急培训、应急演练等需求&#xff0c;也能够应对战时的应急指挥、应急救援、应急决策等需求&#xff0c;达到统一…

前端性能监控和错误监控

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

积极办理等保测评,保证企业网络安全!

随着网络的越发普及以及发达&#xff0c;网络安全问题日益突出&#xff0c;保障网络安全越发重要。为了保障网络系统的安全稳定运行&#xff0c;办理等保测评成为了企业和组织必须面对的重要任务。简单来说就是&#xff0c;积极办理等保测评&#xff0c;保证企业网络安全&#…

1005. K 次取反后最大化的数组和 增强for循环(foreach循环)遍历数组

1005. K 次取反后最大化的数组和 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;_1005K次取反后最大化的数组和_1005K次取反后最大化的数组和_简洁写法 错误经验吸取增强for循环&#xff08;foreach循环&#xff09;遍历数组 原题链接&am…

Kafka--从Zookeeper数据理解Kafka集群工作机制

从Zookeeper数据理解Kafka集群工作机制 这一部分主要是理解Kafka的服务端重要原理。但是Kafka为了保证高吞吐&#xff0c;高性能&#xff0c;高可扩展的三高架构&#xff0c;很多具体设计都是相当复杂的。如果直接跳进去学习研究&#xff0c;很快就会晕头转向。所以&#xff0c…

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现(二)

5.5 防止低优先级锁饥饿 AntDB-M按照优先级将锁又分了两类&#xff0c;用于解决低优先级锁饥饿问题。 ●独占型(hog): X, SNRW, SNW; 具有较强的不兼容性&#xff0c;优先级高&#xff0c;容易霸占锁&#xff0c;造成其他低优先级锁一直处于等待状态。 ●暗弱型(piglet): SW; …

【leetcode876】链表的中间结点Java代码讲解

12.19 链表的中间结点 给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&a…

P2P网络下分布式文件共享场景的测试

P2P网络介绍 P2P是Peer-to-Peer的缩写&#xff0c;“Peer”在英语里有“对等者、伙伴、对端”的意义。因此&#xff0c;从字面意思来看&#xff0c;P2P可以理解为对等网络。国内一些媒体将P2P翻译成“点对点”或者“端对端”&#xff0c;学术界则统一称为对等网络(Peer-to-Pee…

Redis7--基础篇9(SpringBoot集成Redis)

1. jedis、lettuce、Redistemplate的关系 第一代为jedis&#xff0c;之后推出了lettuce&#xff0c;然后springboot继承了Redistemplate&#xff0c;现推荐使用Redistemplate。 总的来说&#xff0c;jedis、lettuce、Redistemplate都是java操作Redis数据库的驱动。 2. 本地Ja…

骨传导耳机和开放式耳机有什么区别?一文读懂骨传导耳机和开放式的关系!

先说结论&#xff0c;骨传导耳机和气传导耳机两者都属于是开放式耳机&#xff0c;开放式耳机指的是开放双耳佩戴的耳机&#xff01; 开放式耳机分为两种&#xff0c;分别是骨传导耳机和气传导耳机&#xff0c;虽然两者都属于开放式耳机&#xff0c;但它们的佩戴方式和传声原理…

【Unity】运行时创建曲线(贝塞尔的运用)

[Unity]运行时创建线&#xff08;贝塞尔的运用&#xff09; 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点&#xff0c;三角面&#xff0c…

数据分析为何要学统计学(10)——如何进行比率检验

比率检验是通过样本推测某种事件的总体占比水平。要求事件仅有互斥的两种情况&#xff0c;即&#xff0c;概率分别为p与1-p。 比率检验分单样本和双样本两种情况&#xff0c;以下我们分别介绍。 1. 单样本比率检验 形如这样的问题&#xff1a;“小学生近视比例日益提高&#…

Starting the Docker Engine...一直转圈

出现的问题&#xff1a; 原因排查&#xff1a; 看了网上的很多篇文章&#xff0c;每个原因都排查了&#xff0c;没有发现问题。 遇到这样的情况应先看自己是否安装成功 打开运行&#xff0c;在空框中输入powershell并点击确定&#xff1a; docker version 显示版本证明安装…

2023年国赛高教杯数学建模D题圈养湖羊的空间利用率解题全过程文档及程序

2023年国赛高教杯数学建模 D题 圈养湖羊的空间利用率 原题再现 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养&#xff0c;适应不同种类、不同阶段的牲畜对空间的不同要求&#xff0c;以保障牲畜安全和健康&#xff1b;与此同时&#xff0c;也要尽量减少空间闲置所…

微服务技术 RabbitMQ SpringAMQP P61-P76

B站学习视频https://www.bilibili.com/video/BV1LQ4y127n4?p61&vd_source8665d6da33d4e2277ca40f03210fe53a 文档资料: 链接&#xff1a;https://pan.baidu.com/s/1P_Ag1BYiPaF52EI19A0YRw?pwdd03r 提取码&#xff1a;d03r 一 初始MQ 1. 同步通讯 2. 异步通讯 3. MQ常…

Jenkins 添加节点报错

报错日志 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.UnsupportedClassVersionError: hudson/remoting/Launcher has been compiled by a more recent version of the Java Runtime (cl…

如何搭建企业管理系统Odoo并远程访问管理界面【内网穿透】

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

短视频账号矩阵系统3年技术独立源头正规开发搭建

短视频账号矩阵3年技术独立开发打造是一个非常有挑战性和前景的项目。以下是一些建议&#xff0c;帮助你成功打造一个成功的短视频账号矩阵&#xff1a; 1. 确定目标受众&#xff1a;首先需要明确你的目标受众是谁&#xff0c;了解他们的兴趣爱好、年龄、性别等&#xff0c;以便…

ModuleNotFoundError: No module named ‘openai.error‘

ModuleNotFoundError: No module named ‘openai.error’ result self.fn(*self.args, **self.kwargs) File “H:\chatGPTWeb\chatgpt-on-wechat\channel\chat_channel.py”, line 168, in _handle reply self._generate_reply(context) File “H:\chatGPTWeb\chatgpt-on-wec…