（填坑日记）vue项目中echarts散点点击事件失效解决办法

最新推荐文章于 2024-06-13 16:39:53 发布
最新推荐文章于 2024-06-13 16:39:53 发布
阅读量2.6k 收藏
点赞数
文章标签： vue echarts 点击事件失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41513228/article/details/102619197
版权

vue项目中echarts散点点击事件失效解决办法

前不久因为echarts点击事件失效的问题困扰了很久，因为项目在pc端已经完成了，准备适配移动端时就出现了这个问题，网上查了很久都没有找到解决方案，经过不断尝试才发现是echarts版本的问题，废话不多说，直接上代码。

webpack安装

首先卸载之前的版本，也就是echarts的最新版本（点击事件失效就是因为最新版本不稳定导致）

npm uninstall echarts

然后执行(安装3.6.2版本，相对稳定）
npm install echarts@3.6.2 --save

普通项目安装

直接在vue项目的index.html中引入echarts的js就行

Mecle_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Echarts地图区域点击事件无效 && geo.lable.formatter无效
Zaqenenen的博客
03-07 6674
需求：获取echarts当前点击城市名称 bug：Echarts地图区域点击事件无效，添加.getZr()后又无法获取到地图当前点击城市。 这个我看了一些资料，说是版本问题，，，然鹅我下了几个最新echarts版本都无效。怀疑是我加了自定义区域让它点不中了？？ 解决： //添加.getZr()之后，又获取不到params中当前点击城市 let self=this; this.chart.getZr().on('click', function (params) { console.log('好的终于点击到
解决vue 绑定对象内点击事件失效问题
10-18
在Vue.js框架中，开发者常常...通过以上的解释，我们可以了解Vue中正确绑定点击事件的方式，并掌握如何在对象内处理点击事件失效的问题。希望这些知识点可以帮助开发者在使用Vue.js框架时，更加高效地解决此类问题。
echart 绑定点击事件无效，原因是属性设置错误
Bright2017的博客
12-03 8070
最近做的项目需要联动两个图表，点击在折线图或者柱状图柱子上，触发事件。 正常做法就是给图表绑定上click事件即可，但这次绑定后却无效。 最终发现是属性设置问题 silent:true// 是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 改为true或者干脆不设置这个属性即可。 子组件中 this.$emit("loadedChart", this.charts); 在组件上绑定事件 @loadedChart="manufactorClick" manuf...
vue-echarts与echarts图标拐点点击及其图表任意点击方法
最新发布
qq_39536826的博客
06-13 392
vue-echarts与echarts图标拐点点击及其图表任意点击方法
uniapp echarts 解决点击失效问题
m0_56069088的博客
01-16 1272
解决echarts在uniapp中点击事件失效问题
vue使用ECharts点击事件不能执行的坑（点击第一次没反应第二次才执行）
盛典
02-25 4733
html区域 <template> <div id="echarts_bazaar" style="width: 100%; height: 90%" @click="spik()"></div> </template> 函数区域 spik() { const myChart = this.$echarts.init(document.getElementById(‘echarts_bazaar’)) myChart.on(‘click’, functi
echarts图表上点击事件失效
HHHHH2187的博客
02-27 1739
降级echarts版本 ，缺点降级后图表样式出现变化，需要自己手动调整。不需要降版本，只需要在获取echarts的时候添加两句以下代码。大概猜测就是版本不兼容或者哪里冲突导致点击事件失效。给图表添加点击事件，发现点击图表没有触发点击事件。+echarts+H5移动端。
vue 项目引入echarts 添加点击事件操作
10-14
本文将详细介绍如何在Vue项目中引入ECharts以及如何添加点击事件操作。 首先，为了全局使用ECharts，我们需要在`main.js`文件中导入ECharts库。这可以通过以下代码完成： ```javascript import echarts from '...
解决vue组件中click事件失效的问题
12-13
在Vue.js开发过程中，我们经常会遇到各种问题，其中包括点击事件（click）失效的情况。这个问题在使用第三方库如better-scroll时尤为常见。本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中...
vue项目中echarts点击事件失效解决办法
qq_25691983的博客
01-11 2043
https://www.cnblogs.com/hpx2020/p/12877155.html
uniapp echarts 点击失效
qq_43345846的博客
08-03 1486
这个问题网上搜了一堆，有的让你降版本，有的让你改源码。都不太符合预期，目前我的方法可以用最新的echarts。这个方法就是由npm安装转为CDN，当然你可能会质疑用CDN这样会不稳定，那如果CDN的地址是本地呢？
vue echarts和vue-echarts鼠标事件不生效
Br不二
11-23 1146
不论是在vue还是vue3中，vue-echarts都比echarts获取元素后要多一步操作
echarts gl 3d地图，click事件失效，解决办法
程序员石磊
02-01 5061
问题 比如点击四川，进行下钻，需要获取点击区域的name属性,根据name进而异步获取四川的地图的json，如下图所示： echart和gl版本 Loaded claygl, version 1.2.1 echarts-gl.min.js:1 Loaded echarts, version 4.6.0 事件绑定写法 myChart.on('click', function (clickpar...
echarts柱状图添加点击事件，但无法触发弹窗（不显示问题）
zhj1329000的博客
07-04 1718
这种写法的问题在于点击事件用的是funtion，因为用了funtion后事件里的this指向就不是原来的指向了，所以即便this.dialogVisibleA的输出结果是true也不会触发打开弹窗。首先在el-dialog弹出框上加上append-to-body，然后将function改为=>写法。(还有另一种解决方案，就是在定义that=this，也可解决）
Echarts点击事件无法触发问题
ancartoon的博客
10-27 4548
vue中的echarts对象绑定click事件无法调用vue的实例对象 错误代码： this.fanChart.on('click', function(params) { this.getData(params.data.code); }) 正确代码： this.fanChart.on('click', (params)=> { this.getData(params.data.code); }) ...
echarts3D地球点击事件无效
weixin_44162650的博客
07-01 2840
使用echarts的3D地球时，出现点击事件没有效果的情况。
uni-app小程序里用echarts-for-wx-uniapp，dispatchAction不起作用
FUSHENGRUOMENG111的博客
07-02 1177
饼状图自定义了高亮显示和点击时候高亮显示及自定义操作， 产生问题： 1.刚加载时候的默认高亮不起作用 2.点击空白区域，高亮消失 解决方法： 直接设置不起作用，将设置加在$nextTick里，问题解决 代码示例： setPieOption(data,success){ this.ec2.option.series[0].data=data this.$nextTick(()=>{ this.$refs.echa...
echarts饼图点击图例事件第一次没反应，第二次才执行（angular版本）【问题笔记】
yuyu的博客
05-24 1402
饼图点击图例事件第一次没反应，第二次才执行
echarts在Vue中组件不生效或渲染异常的一种可能问题
qq_33758085的博客
07-29 812
使用echarts遇到的坑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值