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>
效果图: