Article directory
First, the configuration process
- Introduce Echarts library and heat map plug-in
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/extension/dataTool.min.js"></script>
- create a container
<div id="chart" style="width: 600px;height:400px;"></div>
- Initialize Echarts instance
var myChart = echarts.init(document.getElementById('chart'));
- Configure the data and style of the heat map
option = {
tooltip: {
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
type: 'heatmap',
data: [
[0, 0, 10],
[0, 1, 20],
[0, 2, 30],
[1, 0, 40],
[1, 1, 50],
[1, 2, 60],
[2, 0, 70],
[2, 1, 80],
[2, 2, 90]
],
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
- Set the configuration item to the Echarts instance
myChart.setOption(option);
The above is the specific configuration process of Echarts heat map. Among them, it should be noted that the data format of the heat map is a two-dimensional array, and each element contains three values, representing the x-axis coordinates, y-axis coordinates, and data values. At the same time, you can adjust the style of the heat map according to your needs, such as adjusting color, transparency, labels, etc.
Two, specific examples
The following is a simple echarts heat map example:
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 热力图示例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- echarts 容器 -->
<div id="chart" style="width: 600px;height:400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: ['早上', '中午', '晚上'],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: '热力图',
type: 'heatmap',
data: [
[0, 0, 10],
[0, 1, 20],
[0, 2, 30],
[1, 0, 40],
[1, 1, 50],
[1, 2, 60],
[2, 0, 70],
[2, 1, 80],
[2, 2, 90],
[3, 0, 80],
[3, 1, 70],
[3, 2, 60],
[4, 0, 50],
[4, 1, 40],
[4, 2, 30],
[5, 0, 20],
[5, 1, 10],
[5, 2, 5],
[6, 0, 0],
[6, 1, 0],
[6, 2, 0]
],
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
Show results:
explain:
-
Import echarts.js library.
-
Create a div container in HTML for displaying echarts charts.
-
Initialize the echarts instance in JavaScript and bind it to the div container.
-
Configure various properties of echarts charts, including tooltip, animation, grid, xAxis, yAxis, visualMap and series.
-
Use the setOption method to apply configuration items to the echarts instance to display the chart.
In this example, we create a 3x7 heatmap showing the intensity of activity at different times of the day for each day of the week. Among them, xAxis indicates the day of the week, yAxis indicates the time period, visualMap indicates the data range corresponding to the color, and series indicates the data of the heat map.