echarts 图点击事件
有三种方式,介绍一下,大家学习哈
1、利用tooltip记录信息,使用zr 监听事件,进行事件处理。
这种方法是利用showTip方法或者tooltip的formatter函数记录选中的数据信息,并在zr监听到的事件中以记录的信息来处理点击事件,弥补zr携带的信息不便使用的缺陷,具体实现可参照这里。
这种方法可以实现想要的效果,但是需要不断的记录、更新信息,影响性能。
2、利用tooltip触发时选中区域的axisPointer的formatter抛出选中数据的相关信息,并在回调函数中进行数据处理。实现如下:
3、 利用echarts提供的新API convertFromPixel完美解决。
这种方法借助于convertFromPixel和zr来实现需要的效果,实现方法如下:
this.echart.getZr().on('click',params=>{
const pointInPixel= [params.offsetX, params.offsetY];
if (this.echart.containPixel('grid',pointInPixel)) {
let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
}
});
实现的代码解释如下:
使用getZr添加图表的整个canvas区域的点击事件,并获取params携带的信息:
this.echart.getZr().on('click',params=>{})
获取到鼠标点击位置:
const pointInPixel= [params.offsetX, params.offsetY];
使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。
if (this.echart.containPixel('grid',pointInPixel)) {}
使用API convertFromPixel获取点击位置对应的x轴数据的索引值,我的实现是借助于索引值的,当然可以获取到其它的信息,详细请查看文档。
let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
其实在上一步骤中可以获取到丰富的诸如轴线、索引、ID等信息,可以在自己的事件处理代码中方便的使用。
这种方法仅响应图表区域的响应事件,通过convertFromPixel获取到可能需要的一些信息,可以很好的实现需求,并且不会有其它的性能影响,完美实现了如题的需求。
我就是用的第三种方式,此文源于网络摘抄,感谢大神们的回答
echarts 图点击事件的更多相关文章
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- echarts图表点击事件之跳转页面和加载页面
下图显示四个条形图,点击条形图就跳转到其页面,这说明您要判断你点了那个条形图. echarts给了它点击事件 写法,我们只要模仿就行,代码如下: //echarts图表点击跳转 myChart.on( ...
- echarts饼图点击事件
/** * 点击事件 */myChart2.on('click', function (param) { var index = param.dataIndex; alert(index);});
- 关于Echarts柱状图点击事件的实现方法
开发过程中,我们经常会碰到这样的需求:在柱状图上,点击某条柱形,调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件,其中maChart是绘图对象 一.简单的点击事件 myChar ...
- Echarts折线图点击事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- echarts添加点击事件
由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...
- Echarts设置点击事件
简单明了. echarts初始化完成之后,给实例对象通过on绑定事件. 这里的事件包括: 'click','dblclick','mousedown','mouseup','mouseover','m ...
随机推荐
- OfficeCommandbarViewer20171005.rar
OfficeCommandbarViewer用于查看Office各组件工具栏和控件信息的一款软件. 采用了本地XML文件的方式,所以使用本工具不需要提前打开任何Office组件. 动态图: 下载地址: ...
- css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...
- Jenkins+maven+jmeter+eclipse搭建自动化测试平台
一.准备工作 1.jmeter准备测试脚本 2.maven环境配置 3.eclipse创建maven项目 4.Jenkins集成项目 二.jmeter准备测试脚本 使用jmeter准备测试脚本(不管录 ...
- 函数动态参数和Python中的三种空间
动态参数 : *args 实参角度: 定义一个函数时, * 将所有的位置参数聚合到一个元祖中 顺序 : 位置参数 > * args > 默认参数 > **kwargs 接受所有参数 ...
- Tarjan相关
先码住: 板子:http://www.cnblogs.com/luckycode/p/5255656.html 求割点/割边:http://www.cnblogs.com/c1299401227/p/ ...
- windows server 2008 r2配置NTP时间服务器
windows server 2008做NTP服务器与H3C网络设备组网首先WINDOWS SERVER 2008默认是关闭NTP服务的,需要通过修改注册表开启方法如下:--------------- ...
- python代码覆盖率统计-coverage
coverage.py是一个用来统计python程序代码覆盖率的工具.它使用起来非常简单,并且支持最终生成界面友好的html报告.在最新版本中,还提供了分支覆盖的功能. 官方网站: http://ne ...
- SpringBoot打印MyBatis sql日志输出
SpringBoot打印MyBatis sql日志输出 默认情况下mybatis是不开启SQL日志输出,需要手动配置 方法一:(在mybatis整合在springboot框架的情况下) 只需要在配置文 ...
- Java IO: 异常处理
原文链接 作者:Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 流与Reader和Writer在结束使用的时候,需要正确地关闭它们.通过调用close()方法 ...
- GPU PassThrough in KVM
实现步骤 环境 OS: # cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) # uname -a Linux hyhive 3 ...