echart点击范围太小，getZr()合并containPixel()扩大点击范围。

最新推荐文章于 2024-08-13 16:13:49 发布
最新推荐文章于 2024-08-13 16:13:49 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GracieLaw/article/details/108196170
版权

原点击事件切换如下

chart.getZr().on('click', async (params) => {
	const pointInPixel = [params.offsetX, params.offsetY]
	if (chart.containPixel('grid', pointInPixel)) {
		let index = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
		// index=数据index
		// todo...
	}
})
GracieLaw
关注
专栏目录
echart柱状图局部点击和整条柱形的点击事件
AIGC大前端小王子
04-20 1958
在柱状图上，点击某条柱形，调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件 一、简单的点击事件 myChart.on('click', function (params) { var index = vm.index; var select = params.dataIndex; if (index !== select) { var confType; if (select === 0) { vm.focusType.
echart 点击全屏显示
weixin_45335168的博客
07-02 2623
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼图</title> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <style>
Echarts扩大点击范围
z15533031600的博客
02-10 1428
使用场景： 当我们想点击柱子触发click事件，有些数据太小了无法轻易找到点击处 1：只有点击到柱子上才能触发，2：只有鼠标指示为小手????时才能触发 引出问题： 1：扩大点击范围，点击整条阴影部分可触发点击事件 2：鼠标指示到阴影部分（可触发事件部分）显示小手预示可点击 解决问题： 部分代码↓ this.charts.getZr().off('click')// 防止点击调用多次 // 鼠标移动到阴影范围 setCursorStyle('pointer') this.charts.getZr().o
[echarts] 使用getZr()事件获取柱状图当前点击列的数据
qq_14993591的博客
03-11 2610
var t = document.getElementById("cardChart"); t.style.width = window.offsetWidth + "px"; var cardChart = echarts.init(t), options = { color: ['#3398DB'], title: { left.
8月echarts记录-雷达图tooltip实现单轴显示、解决柱状/折线图点击非图表图形元素不会触发事件、多柱形图点击选中改变背景颜色等
最新发布
ll_883963的博客
08-13 1342
getZr()用于获取Echarts实例中的zrender实例。zrender是一个轻量级的Canvas绘图库，Echarts使用zrender来进行图表的绘制containPixel用于判断一个点是否在指定的图形元素内部。// 用于判断是否在某一个坐标上 使用containPixel 方法支持的类型有 grid, polar, geo, series-map, series-graph, series-pie。// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。
echarts.getZr()事件
weixin_38912662的博客
07-24 396
最近遇到一个需求，点击图形上的某个数据项，触发点击事件，点击空白地方，取消点击事件，查看文档后可以使用getZr(), 不多废话，直接上想看的。
echarts——折线图点击线触发函数getZr()——技能提升
yehaocheng520的博客
06-28 4417
echarts——折线图点击线触发函数getZr()——技能提升
echarts 柱状图使用getZr点击柱子以外的部分
G_ruirui的博客
06-04 5814
例子 注意：echarts点击事件先进行off(),能够避免2次事件 chart.getZr().off() chart.getZr().on('click',params=>{ let pointInPixel = [params.offsetX, params.offsetY] console.log(chart.containPixel('grid', pointInPixel)) let pointInGrid = chart.convertFromPixel({ serie
在小程序中使用Echart图表的示例代码
10-18
在小程序开发中，集成Echart图表是一种常见的数据可视化方式，它可以帮助用户更直观地理解复杂的数据。Echart是一款强大的JavaScript图表库，提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持高度自定义，...
小程序中使用Echart
03-29
最近有几个小程序用到了图表，把我一顿折腾。所以来讲一下使用图表时所遇到的问题。 我们所用到的是 ECharts 的微信小程序版本 ;它提供了一个小程序原生的组件，然后我们只需要在相关页面引用改组件就好了。 使用...
Echarts 雷达图设置拐点大小和形状，tooltip后文字不居中对齐
大剑师兰特的GIS世界
02-14 2382
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
echarts折线图添加区域点击事件，而不用去点小圆点（扩大点击范围）
热门推荐
lightpass的博客
08-06 1万+
不要写onClick事件，用以下方法代替 myChart.getZr().on('click',function (params) { var pointInPixel= [params.offsetX, params.offsetY]; if (myChart.containPixel('grid',pointInPixel)) { /*此处添加具体执行...
echarts图形点击事件数据差别大太小无法点击
lhyxm的博客
09-18 1118
在使用echarts插件时，在图形中需要使用点击事件时，由于数据差别很大，echarts.on(‘click’,function(){})的方式获取参数点击困难。如下所示： 解决方法如下： let myChartDrawer = echarts.init(document.getElementById('broad')) . . . . . . myChartDrawer.getZr().on('click',params=>{ const pointInP
扩大图片点击区域
qq_26522993的博客
03-15 509
在开发过程中，有一种需求是：使用的src 资源图片过小，但是用户需要的点击区域又要求大。此时如果人为扩大图片尺寸，会导致突变失祯，变得模糊
Echarts中提供的api
qq_46344419的博客
06-14 3144
Echarts中提供的api
Echarts折线图面板区域可任意点击
YL
11-25 1608
之前一直使用echarts做一些图表，但没有做过点击事件。当做项目遇到需要在折线图面板任意位置点击，获取当前点击的时间。echarts折线图本身是有节点 点击事件的 container.on(‘click’, function (params) {}） 方法，代码如下： container.on('click', 'series.line',function (params) { alert(params.name); }); 但是尝试了后，发现并不能满足需求。在网上搜了下，知道了cl
解决echarts的柱状图和折线图的点击非图表图形元素不会触发事件
niesiyuan000的博客
03-25 970
啊啊
echarts点击柱状图阴影也能触发点击事件
weixin_42729938的博客
08-27 4312
在涉及到图标的开发中，相信大家经常会用到echarts，echarts中可以通过on方法添加事件处理函数，可以很方便的实现一些交互。如： 但是直接添加的click事件，只有点击在图形元素上才会触发事件处理函数。以柱状图为例： 只有点击柱状图形才能触发通过on添加的事件监听，图中标注的灰色区域并不能触发点击。在数据差别很大的图形中，想准确点击数据较小甚至为0的图形是非常困难的，这就使得一...
echart点击事件
07-27
ECharts（百度开源的一个数据可视化库）提供了丰富的交互功能和事件处理机制，包括点击事件。点击事件可以用于在用户点击图表元素时执行特定的操作。 要实现 ECharts 的点击事件，你可以通过以下步骤进行操作： 1. 首先，确保你已经引入了 ECharts 的库文件，并创建了一个图表实例。你可以参考 ECharts 的官方文档或示例代码来完成这一步骤。 2. 在图表实例的配置项中，使用 `on` 属性来绑定点击事件。例如，如果你想在用户点击某个系列（series）的数据项时执行操作，可以在对应的系列配置中添加 `on` 属性，然后指定 `click` 事件和对应的处理函数。 ```javascript option = { series: [{ type: 'bar', data: [10, 20, 30, 40], // 绑定点击事件 on: { click: handleClick } }] }; ``` 3. 在处理函数 `handleClick` 中，你可以获取到点击事件的相关信息，例如点击的图表元素、数据等。根据需要进行相应的操作，比如弹出提示框、修改数据等。 ```javascript function handleClick(params) { // 获取点击的数据项索引 var dataIndex = params.dataIndex; // 获取点击的数据值 var value = params.value; // 其他操作... } ``` 通过上述步骤，你就可以在 ECharts 中实现点击事件，并根据用户的点击执行相应的操作。请注意，具体的实现方式可能会因你使用的 ECharts 版本和需求而有所不同，你可以根据官方文档和示例进行相应的调整。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值