echarts热力图点击事件带自定义参数

最新推荐文章于 2024-03-11 18:41:40 发布

万德佛

最新推荐文章于 2024-03-11 18:41:40 发布

阅读量2.3k

点赞数 2

分类专栏：前端 echarts 文章标签： echars 前端

本文链接：https://blog.csdn.net/qq_39251440/article/details/113344041

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

echarts热力图点击事件带自定义参数,根据官网示例修改了一下，仅供参考~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热力图</title>
	</head>
	<body>
		<div id="echarsID" style="height: 400px;"></div>
	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" type="text/javascript" charset="utf-8"></script>
	<!-- echars版本可以使用自己的 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function showEchars() {
			var chartDom = document.getElementById('echarsID');
			var myChart = echarts.init(chartDom);
			var option;
            //横坐标name
			var hours = ['1a', '2a', '3a', '4a', '5a', '6a'];
            //纵坐标name
			var days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

			var data = [{
					customParam1: "自定义参数1",
					//[x坐标, y坐标, value值]
					value: [0, 1, 2],
					customParam2: "自定义参数2-1"
				},
				{
					customParam1: "自定义参数2",
					value: [0, 2, 5],
					customParam2: "自定义参数2-2"
				},
				{
					customParam1: "自定义参数3",
					value: [1, 1, 0],
					customParam2: "自定义参数2-3"
				},
				{
					customParam1: "自定义参数4",
					value: [1, 2, 7],
					customParam2: "自定义参数2-4"
				},
				{
					customParam1: "自定义参数5",
					value: [2, 3, 8],
					customParam2: "自定义参数2-5"
				},
				{
					customParam1: "自定义参数6",
					value: [2, 5, 2],
					customParam2: "自定义参数2-6"
				},
				{
					customParam1: "自定义参数7",
					value: [3, 1, 1],
					customParam2: "自定义参数2-7"
				},
				{
					customParam1: "自定义参数8",
					value: [3, 4, 1],
					customParam2: "自定义参数2-8"
				},
				{
					customParam1: "自定义参数9",
					value: [4, 3, 1],
					customParam2: "自定义参数2-9"
				},
				{
					customParam1: "自定义参数10",
					value: [5, 2, 1],
					customParam2: "自定义参数2-10"
				}
			];
			option = {
				title: {
					text: "热力图点击事件带自定义参数",
					left: 'center',
					top:'2%'
				},
				tooltip: {
					position: 'top'
				},
				grid: {
					height: '50%',
					top: '10%'
				},
				xAxis: {
					type: 'category',
					data: hours,
					splitArea: {
						show: true
					}
				},
				yAxis: {
					type: 'category',
					data: days,
					splitArea: {
						show: true
					}
				},
				visualMap: {
					min: 0,
					max: 10,
					calculable: true,
					orient: 'horizontal',
					left: 'center',
					bottom: '15%'
				},
				series: [{
					name: 'Punch Card',
					type: 'heatmap',
					data: data,
					label: {
						show: true
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			option && myChart.setOption(option);
			//热力图点击事件
			myChart.off('click');
			myChart.on('click', function(e) {
				console.log(e)
				console.log(e.data.customParam1,e.data.customParam2)
			});
		}
		//调用方法
		showEchars()
	</script>
</html>

效果图:

万德佛

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
echarts热力图点击事件带自定义参数

echarts热力图点击事件带自定义参数,根据官网示例修改了一下，仅供参考~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>热力图</title> </head> <body> <div id="echarsID" style="height: 400px;"></div> </bod.
复制链接

扫一扫