ECharts点击事件自定义参数

最新推荐文章于 2024-06-25 15:38:48 发布
最新推荐文章于 2024-06-25 15:38:48 发布
阅读量2.2w 收藏 15
点赞数 5
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs373616511/article/details/80941964
版权

实际开发中可能需要传自定义参数到点击事件，通过params.data(传入的原始数据项)实现自定义参数(console打印结果)

效果图：


源码：（注意红色部分）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>echartsDemo</title>
		<script type="text/javascript" src="js/echarts/echarts.min.js"></script>
	</head>

	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			//点击事件
			myChart.on('click', function(param) {
				console.log(param);
				console.log(param.data.name);
				console.log(param.data.value);
				console.log(param.data.userDefined);
			});
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [{
						name: "名称",
						value: 5,
						userDefined: "test123456"
					}, 20, 36, 10, 10, 20]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>

</html>

ECharts所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}
阿瑟与非
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
地图的legend点击事件_e_charts如何添加地图markPoint的点击事件？？？？？比如我要点击下图中的那个点并且出现浮动框...
weixin_28903391的博客
01-14 1282
展开全部API上不是有吗？option={title:{text:'山东省事业费开支e69da5e6ba9062616964757a686964616f31333361306439情况',textStyle:{fontSize:20,fontWeight:'bolder',color:'#333'},x:'center'},tooltip:{trigger:'item'},legend:...
Echarts点击事件
weixin_42079403的博客
04-09 2580
Echarts在实际业务中，肯定会有很多涉及交互，在此总结一下近期业务常用到的点击事件。
echarts 折线图柱状图增加点击事件
最新发布
weixin_42050406的博客
06-25 541
上方的隐藏折线是按钮在坐标轴之外，获取到的option.xAxis[0].data[xIndex]为空，也可以通过判断规避。单折线图，可以直接监听click事件（只有点击到折线才会触发）但很多时候，我们是要求点击折线图任意位置触发点击事件。用这个方法可以获取到点击位置的具体数据。而且要注意隐藏折线的操作按钮。
Echarts设置点击事件
热门推荐
lxiang222的博客
09-15 6万+
通常在使用Echarts画图之后会碰到一个需求，通过点击生成后图形具体某一项来传递相应的参数然后进行一个页面的跳转，当我遇到这个需求第一就想到了用on绑定点击事件的方法，然后就在代码上进行尝试，果然可以实现这个功能，我在这块展示的是一个柱状图，通过点击事件输出一下获取的参数可以得到什么结果呢？ 代码如下： myChart.on('click',function(params){ con...
echarts热力图点击事件带自定义参数
一念执着
01-28 2428
echarts热力图点击事件带自定义参数,根据官网示例修改了一下，仅供参考~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>热力图</title> </head> <body> <div id="echarsID" style="height: 400px;"></div> </bod.
Echarts数据条绑点点击事件
木兮兰兮
03-23 1539
第一步： echarts配置省略。。。。。。。 第二步：echarts数据值填充完成后，绑定事件，业务逻辑编写。（页面跳转测试） params参数，根据参数的值，进行相应的逻辑处理，如下所示： 第三步，结果如图所示： 起始（统计分析）： 点击数据条之后跳转相应的界面。 ...
echarts 点击事件 传参数 自定义参数（利用ajax将参数传入后台）
u010865811的博客
04-02 8278
//echarts里面点击事件 myChart.on('click', function (params) { //mychart调用下面kmeansyun方法，并传入参数 kmeansyun(params.name) }); //点击事件触发方法 方法内其他参数省略 function kmeansyun(name) { var worldCloudcharts=echarts...
echarts饼图扇区添加点击事件的实例
08-29
在使用ECharts这个强大的数据可视化库时，有时候我们需要为图表元素添加交互功能，例如点击事件。在本实例中，我们将探讨如何为ECharts饼图的扇区添加点击事件，以便在用户点击扇区时能够触发特定的操作。首先，我们...
echarts 3D地图，地图区域点击触发事件
10-16
本篇文章将深入探讨如何在 ECharts 3D 地图中实现地图区域点击触发事件，并添加数据。 首先，我们需要了解 ECharts 3D 地图的基本配置。创建一个 3D 地图需要设置 `chart` 类型为 `'map3d'`，并指定地图的类型，...
091 ECharts扩展示例自定义视图_大屏幕展屏（html源码）.rar
04-29
8. **事件监听**：通过监听ECharts的事件，可以实现与用户的交互反馈，如点击图表区域触发相应的行为。 9. **响应式设计**：利用媒体查询(`media query`)或ECharts提供的resizeHandler，确保图表在不同尺寸的屏幕下...
前端echarts词云图完整demo，+配置参数详解
03-25
例如，你可以通过自定义`generateWordCloudShape`函数来改变词云形状，通过监听`click`事件来响应用户点击等。 六、总结 ECharts的词云图功能强大且易于使用，通过调整配置参数，可以创建出各种风格的词云图，满足...
echarts 自定义配置信息
zq爱生活爱代码的博客
05-23 1941
（一）renderItem 方法 var option = { ..., series: [{ type: 'custom', renderItem: function (params, api) { // ... }, data: data }] } 在渲染阶段，对于series.data中的每个数据项（为方便描述，这里称为dataItem)，会调用此renderItem函数。 ...
echarts中点击事件
qq_43339903的博客
06-26 664
echarts中点击事件 添加几行代码就可以了 如下所示 const clickFun = param => { console.log(param) } myChart.on("click", clickFun);
echarts之自定义（一）
weixin_42979149的博客
12-09 2413
最大值&最小值&平均值 效果图 代码 /* params：包含了当前数据信息和坐标系的信息。 api：是一些开发者可调用的方法集合。 api.value(...)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。 api.coord(...)，意思是进行坐标转换计算。例如 var point = ap...
echarts常用配置、添加事件、添加自定义值
weixin_41897680的博客
07-06 8829
echarts常用配置及如何添加事件
Echart 点击事件整理
qq_34618492的博客
09-15 7665
工作经常会用到图表组件，这里主要针对 echarts 插件中的点击事件说明，代码不是很难，主要是如何区分点击的位置。
echarts柱状图添加点击事件
qq_43894292的博客
11-30 984
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击echarts圆柱体事件</title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body&g
echart图表markPoint的使用
weixin_45353536的博客
03-10 1376
mark图表
ECharts事件处理并和对返回params对象的内部参数分析
BBBling的博客
07-07 6628
ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。 ECharts 中事件分为两种类型: 一、用户鼠标点击如’click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。 二、用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘datazo
echarts 线点击事件
09-15
### 回答1： ECharts是一款基于JavaScript的可视化图表库，支持各种类型的数据可视化，包括折线图、柱状图、散点图、饼图、地图等。在ECharts中，可以通过添加事件监听器来实现对图表元素的交互。 要实现线的点击事件，需要使用ECharts的图表实例的on方法来添加监听器。例如，假设我们有一个折线图的实例myChart，我们可以通过以下代码来实现折线的点击事件： ```javascript myChart.on('click', 'series', function (params) { if (params.seriesType === 'line') { console.log(params); } }); ``` 上面的代码中，我们使用了on方法来添加一个click事件的监听器，监听器的第二个参数是一个字符串'series'，表示我们要监听的是图表中的系列（series）元素，第三个参数是一个回调函数，用于处理事件触发后的逻辑。 在回调函数中，我们首先判断事件触发的元素是否为折线图（seriesType === 'line'），如果是，则打印出事件的参数params，其中包含了事件触发的相关信息，比如触发元素的名称、值、坐标等等。 以上代码仅作为示例，实际应用中可能需要根据具体情况进行修改。 ### 回答2： ECharts线点击事件是指当用户点击ECharts图表中的线条时触发的事件。通过设置相应的事件监听器，可以对线条点击事件进行响应，并根据用户的操作进行相应的处理。 要实现线点击事件，首先需要在ECharts图表的配置中设置相应的事件类型。具体的配置项是`series`中的`type`属性，可以设置为"line"表示饼图类型。然后可以通过`series`中的`event`属性来设置监听器监听`click`事件。 当监听到线条点击事件时，可以通过回调函数获取到相应的事件对象。该事件对象中包含了点击线条的具体信息，比如起始坐标、终止坐标、线条的名称等等。我们可以根据需要进行相应的处理，比如弹出信息框展示线条的详细信息，或者根据点击的线条进行数据筛选等操作。 实现线点击事件需要注意以下几点： 1. 确保ECharts库已经正确引入，以及图表容器的设置。 2. 在ECharts的配置项中设置正确的线图类型。 3. 在`series`中设置`event`属性来监听点击事件。 4. 编写回调函数来处理线点击事件，根据事件对象获取线条的相关信息并进行相应的操作。 总结，ECharts线点击事件是一种用户交互操作，通过设置鼠标点击线条时的事件监听器，可以获取点击线条的详细信息，并根据需求进行相应的处理。这样能够增加图表的交互性和数据分析的灵活性，提高用户体验。 ### 回答3： ECharts是一款流行的开源可视化图表库，它提供了丰富的图表类型和交互功能。其中之一就是线（Line）图的点击事件。 在ECharts中，当用户点击线图上的某个数据点时，可以通过监听事件获取相关的信息。通过绑定`click`事件到线图上，可以在事件监听函数中获取到点击事件的参数。 点击事件的参数包括`event`、`dataIndex`、`data`等信息。其中，`event`表示点击事件本身，通过它可以获取到鼠标的位置等相关信息。`dataIndex`表示点击的数据点在数据数组中的索引，可以通过它获取到具体的数据值。`data`则表示点击的数据点的完整信息，包括数据值和其他自定义的属性。 调用`on`方法来绑定点击事件，示例如下： ```javascript myChart.on('click', function (params) { // 对参数进行处理 var dataIndex = params.dataIndex; var dataValue = params.data; // 其他相关操作 }); ``` 在事件监听函数中，可以根据参数进行相应的操作，比如弹出详细信息的弹窗、调用其他函数进行数据处理等。 总结来说，ECharts提供了丰富的交互功能，包括了线图的点击事件。通过绑定`click`事件，可以在事件监听函数中获取点击事件的参数，从而进行相关的操作。这样可以实现更加灵活和交互性的线图展示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值