ECharts点击事件自定义参数

最新推荐文章于 2025-09-18 17:16:29 发布

原创最新推荐文章于 2025-09-18 17:16:29 发布 · 2.3w 阅读

15 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在ECharts中通过点击事件传递自定义参数，并展示如何读取这些参数的具体方法。通过示例代码，详细解释了如何设置并获取自定义参数。

实际开发中可能需要传自定义参数到点击事件，通过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
}