ECharts 热力图：展示数据密度和趋势
热力图（Heatmap）是一种常用于展示数据密度、分布和趋势的图表。它通过不同的颜色深浅来表示数值大小，常用于数据的地理分布、矩阵数据展示、时间序列等场景。ECharts 提供了强大的热力图功能，能够支持自定义色阶、渐变效果及数据映射。
本文将详细介绍如何使用 ECharts 绘制热力图，涵盖基础配置、色阶与渐变效果的设置以及结合其他组件的高级用法。文章提供了大量示例代码，便于读者理解和实践。
一、热力图的基础结构
热力图的核心是在一个二维区域内，将数据点的值通过颜色的深浅进行映射，展现不同区域数据的密度与趋势。在 ECharts 中，热力图通过 series 中的 type 来定义为 "heatmap" 类型。
1. 热力图的基本配置结构
var option = {
tooltip: {
position: 'top',
formatter: function (params) {
return `X: ${params.value[0]}, Y: ${params.value[1]}<br/>Value: ${params.value[2]}`;
}
},
animation: false,
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [{
name: '热力图',
type: 'heatmap',
data: [[0, 0, 50], [1, 1, 80], [2, 2, 100], [3, 3, 60]],
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
在这个配置中：
- xAxis 和 yAxis 定义了横纵坐标轴。通过
category类型可以将其转化为类别轴，并根据数据填充坐标点。 - visualMap 是热力图的核心部分，用于将数据值映射到特定颜色上。通过
min和max定义数据值范围，并通过inRange.color设置渐变颜色。 - series 中的
data则包含热力图的主要数据。每个数据点是一个包含三个值的数组，表示 x 坐标、y 坐标和数据值。
二、绘制基础热力图
下面我们将演示如何使用 ECharts 绘制一个简单的热力图。
1. HTML 结构
首先，定义一个用于展示热力图的 div 容器：
<div id="heatmapChart" style="width: 800px; height: 600px;"></div>
2. 热力图的 JavaScript 配置
接下来，使用 JavaScript 代码生成热力图：
var heatmapChart = echarts.init(document.getElementById('heatmapChart'));
var heatmapOption = {
tooltip: {
position: 'top',
formatter: function (params) {
return `X: ${params.value[0]}, Y: ${params.value[1]}<br/>Value: ${params.value[2]}`;
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [{
name: '热力图',
type: 'heatmap',
data: [
[0, 0, 50], [0, 1, 70], [0, 2, 80],
[1, 0, 90], [1, 1, 60], [1, 2, 30],
[2, 0, 100], [2, 1, 50], [2, 2, 40]
],
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
heatmapChart.setOption(heatmapOption);
3. 完整的 HTML 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 热力图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>ECharts 热力图示例</h1>
<div id="heatmapChart" style="width: 800px; height: 600px;"></div>
<script>
var heatmapChart = echarts.init(document.getElementById('heatmapChart'));
var heatmapOption = {
tooltip: {
position: 'top',
formatter: function (params) {
return `X: ${params.value[0]}, Y: ${params.value[1]}<br/>Value: ${params.value[2]}`;
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'],
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [{
name: '热力图',
type: 'heatmap',
data: [
[0, 0, 50], [0, 1, 70], [0, 2, 80],
[1, 0, 90], [1, 1, 60], [1, 2, 30],
[2, 0, 100], [2, 1, 50], [2, 2, 40]
],
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
heatmapChart.setOption(heatmapOption);
</script>
</body>
</html>
三、理解色阶、渐变和数据映射
在热力图中，色阶和渐变是核心部分。visualMap 组件用来控制数据值到颜色的映射。
1. 色阶的定义
在 visualMap 中，我们可以通过 min 和 max 来定义数据的范围，同时 inRange 可以设置颜色的变化范围。
visualMap: {
min: 0,
max: 100,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
}
这段代码的意思是将数据从 0 到 100 映射为 #50a3ba 到 #d94e5d 的颜色渐变。
2. 控制渐变效果
通过 inRange 的 color 属性，可以定义颜色的渐变效果。比如，我们可以使用三种颜色来构建
渐变效果，表示低值到高值的颜色变化。
3. 数据映射与交互
ECharts 的热力图不仅支持静态数据展示，还能实时更新数据或添加交互。例如，用户点击某个数据点时可以高亮显示或触发某些事件。
heatmapChart.on('click', function (params) {
console.log(params.name + ': ' + params.value[2]);
});
通过监听 click 事件，我们可以实现热力图的交互功能，让图表更加动态。
四、结合其他组件使用
ECharts 的热力图还可以结合其他组件来增强功能。例如，可以添加图例、数据视图、缩放功能等。
1. 添加图例和数据视图
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
saveAsImage: { show: true }
}
}
2. 添加数据缩放功能
如果热力图数据量较大，可以通过 dataZoom 组件实现数据缩放。
dataZoom: {
type: 'slider',
show: true
}
五、总结
本文详细介绍了如何使用 ECharts 构建热力图，包括基础配置、色阶与渐变、数据映射以及与其他组件的结合使用。通过 ECharts 强大的可视化功能，我们可以轻松绘制出美观且实用的热力图，用以展示数据的密度、趋势和分布。
在实际应用中，热力图广泛用于地理信息系统、时间序列分析、数据可视化等领域。希望本文的示例和讲解能帮助你更好地掌握 ECharts 热力图的使用。