EXTJS系列笔记(6.X)————集成echarts之后的点击事件

最新推荐文章于 2021-03-16 06:21:06 发布

阿尔卑斯0283

最新推荐文章于 2021-03-16 06:21:06 发布

阅读量456

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs echarts 文章标签： extjs echarts

本文链接：https://blog.youkuaiyun.com/java_dotar_01/article/details/89711970

extjs 同时被 2 个专栏收录

20 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文详细介绍了如何在ECharts中实现点击事件，通过实例代码展示了如何在图表元素被点击时触发特定操作，适用于需要交互式图表的开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

集成echarts请看本人上一篇博客。

在实际开发过程中，很多场景需要点击图表中的点来进行部分操作，这里就记录一下我的学习过程。

echart的官方的点击描述：https://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

具体实际代码如下:

{
	xtype : "echartsscatterpanel",						
	height:500,
	option : {
		
		xAxis : [
			{
				type : 'category',
				name:'站点\nRecipe',
				data : []
			}
		],
		yAxis : [
			{
				type : 'category',
				name:'Eqp ID',
				data : []
			}
		],
		series : [
			 {
				 itemStyle:{ 
						normal: {
							color:['black']
						}
				 },
				 type:"scatter"
			 }
		],
		listeners:{
			afterrender:function(obj){

				  //初始化以后 设置 echart的 点击事件
				obj.echarts.on('click', function (params) {
					var option = obj.echarts.getOption();
				}
			}
		}
	}
}

着重看listeners中的代码，在afterrender事件之后，给echarts配置点击事件。

这里的obj表示当前echartsscatterpanel的extjs的对象，obj.echarts就表示实际的echarts对象（在定义的时候就有说明）

params表示实际点击点的具体data，拿取到了option以及点击的点的信息，之后很多事件你就可以自己操作啦~~~