直接上代码吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>HeatMap</title>
</head>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<body>
<div id="main" style="width: 1600px;height:500px;"></div>
</body>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let xData = [];
let yData = [];
function setDataFn(){
let arr=[];
for(let i=0;i<=40;i++){
for(let j=0;j<=40;j++){
arr.push([i,j,Math.random()*j/40*10]);
}
xData.push(i);
}
for (let j = 0; j <=40; j++) {
yData.push(j);
}
return arr
}
let data = setDataFn();
console.log(data);
option = {
title: {
text: '热力图数据加载示例'
},
tooltip: {},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'category',
data: yData
},
visualMap: {
min: 0,
max: 10,
left: 'center',
orient: 'horizontal',
calculable: true,
realtime: false,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
series: [
{
name: 'Gaussian',
type: 'heatmap',
data: data,
emphasis: {
itemStyle: {
borderColor: '#333',
borderWidth: 1
}
},
progressive: 1000,
animation: false
}
]
};
option && myChart.setOption(option);
</script>
</html>
效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/ce78f5b94c0ae981dcf1f8ed0e266c55.png)