【echarts】xAxis鼠标事件失效问题

已于 2023-02-02 11:17:44 修改
阅读量767 收藏 1
点赞数
分类专栏： echarts 文章标签： echarts
于 2023-02-02 11:16:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaojingj_/article/details/128846660
版权

项目中用到echarts柱状图，出现x轴标签文字过长重叠问题，在pass掉标签倾斜、换行方案之后最终决定限制文字长度，超出以…占位，鼠标悬浮时显示完整tooltip。

但编写过程中发现xAxis鼠标事件无法触发，只有bar区域是可触发的。各种bing无果后将echarts文档中相关配置仔细过了一遍，发现xAxis中有这样一个属性：

在这里插入图片描述
默认为

triggerEvent:  false

改为

triggerEvent: true

即可触发

zhaojingj_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 图表工具 属性解析大全
12-18
百度Echarts图表工具的option中个属性详解 title tooltip legend grid dataZoom xAxis yAxis bar line pie series 具体插件 可到官网 https://echarts.apache.org/zh/index.html 查看下载 官网有非常多的各种示例 常用的有line pie bar 等几种常见的图标形式 另外还支持地图 K线 雷达 图 等等等等
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
echarts图表上点击事件失效
HHHHH2187的博客
02-27 895
降级echarts版本 ，缺点降级后图表样式出现变化，需要自己手动调整。不需要降版本，只需要在获取echarts的时候添加两句以下代码。大概猜测就是版本不兼容或者哪里冲突导致点击事件失效。给图表添加点击事件，发现点击图表没有触发点击事件。+echarts+H5移动端。
echarts的axisLabel添加tooltip功能
09-12
echarts插件默认不支持axisLabel的tooltip功能，本demo主要展示axisLabel新增tooltip后的显示效果。有不懂，可以联系我。
echarts2020个省市最新版本数据.zip
12-19
echarts2020个省市最新版本数据.zip // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, //提示框组件 legend: { //图例组件 data:['销量'] //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name }, xAxis: { //直角坐标系 grid 中的 x 轴 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子11"] }, yAxis: {}, series: [{ //系列列表 name: '销量', //系列名称，用于tooltip的显示，legend 的图例筛选 type: 'bar', //类型 data: data //系列中的数据内容数组。数组项通常为具体的数据项 }]
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
vue使用echarts中鼠标滚轮失效问题
lunarych的博客
11-02 1821
问题描述： 前端使用echarts绘图时，鼠标在图表中滚动页面经常失效，只有在滚动条或页面空白区域上才能滚动页面。 原因分析： 未找到原因 - - ， 找到原因了再更新吧。。。望各位大佬们知道原因的能在评论区留言告诉我，感谢！ 解决方案： 为整个页面添加事件： mounted() { //firefox document.addEventListener("DOMMouseScroll", function (event) { if (event.detail> 0) {
vue项目中echarts点击事件失效解决办法
qq_25691983的博客
01-11 1950
https://www.cnblogs.com/hpx2020/p/12877155.html
ECharts可视化图标库 （事件与行为）
Dominic_W的博客
01-12 856
ECharts中的事件与行为 日常开发中用到echarts，一般是用来展示数据，很少在图表上添加一些事件监听函数。但是没用过不代表没有，比如鼠标悬浮之后的高亮样式和鼠标悬浮后显示的tootip,这都属于默认的鼠标悬浮事件。 除此之外，如果想要实现其他的事件响应，可以监听这些事件，然后通过回调函数做出相应处理。 ECharts中的事件名称对应DOM事件名称，是小写字符串 ECharts支持常规的鼠标事件类型： click、dblclick、mousedown、mousemove、mouseup、mouseov
echarts饼图点击图例事件第一次没反应，第二次才执行（angular版本）【问题笔记】
yuyu的博客
05-24 1284
饼图点击图例事件第一次没反应，第二次才执行
uniapp echarts 解决点击失效问题
m0_56069088的博客
01-16 826
解决echarts在uniapp中点击事件失效问题
echarts常用语法
最新发布
05-15
文档中粗略记录了echarts的常见配置项，包括：legend、Title（表示图形上方的标题）、Tooltip（提示框配置）、splitLine（去除网格线）、selected（手动隐藏单个图例）、xAxis（x轴文字及其它类型的配置）、...
ECharts 饼图
12-14
因为不在直角坐标系上，所以也不需要 xAxis，yAxis。 实例 myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽...
echarts图表动态绑定数据异常解决办法！！！
happy_programer的博客
10-16 1110
在使用echarts图表时遇到动态绑定数据后没有数据显示的问题，尝试多次无果。 最后发现是网页在加载时echarts绘制图表的速度总是比get请求动态获取数据的速度快，所以导致每次绘制图表时数据都无法显示。???? 最终我想到了一个办法，给绘制echarts图表的方法设置一个定时器，让绘制速度慢于数据的获取速度。???? 解决方法： 1.主体内容 <div id="ranking" style="width: 750px; height: 530px"></div> 2.绘制图
ECharts条形进度图及滚动条设置案例
每一个想要学习的念头，都是未来的你在呼救。
06-26 2937
ECharts条形进度图及滚动条设置案例
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
wuyxinu的博客
02-13 4615
数据可视化-echarts入门、常见图表案例及项目案例 一、简介 一、数据可视化简介 什么是数据可视化？ 数据可视化是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析；主要是借助于图形化手段，清晰有效地传达与沟通信息。 二、echarts简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备
echarts 在 uniapp 中事件失效问题（dataZoom，legend，tooltip等设置后无法点击等问题）
qq_41540361的博客
08-31 699
根据大佬的说法，echarts 会判断当前环境。解决方法是在 main.js 中添加一行代码。
echart 绑定点击事件无效，原因是属性设置错误
Bright2017的博客
12-03 7482
最近做的项目需要联动两个图表，点击在折线图或者柱状图柱子上，触发事件。 正常做法就是给图表绑定上click事件即可，但这次绑定后却无效。 最终发现是属性设置问题 silent:true// 是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 改为true或者干脆不设置这个属性即可。 子组件中 this.$emit("loadedChart", this.charts); 在组件上绑定事件 @loadedChart="manufactorClick" manuf...
echarts xAxis
07-27
xAxis是ECharts中用于配置x轴的属性之一。根据引用\[1\]，可以使用xAxis.boundaryGap属性来设置x轴两边是否留空白。如果设置为true，则会在第一个和最后一个数据点之间留出空白；如果设置为false，则数据点会紧密...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值