您现在的位置是：网站首页 > ECharts 中的地图与地理热力图制作文章详情
ECharts 中的地图与地理热力图制作
陈川
【
ECharts
】
4908人已围观
在数据可视化领域，ECharts 是一款非常流行的开源图表库。它不仅能够生成各种类型的图表，还能轻松地处理地图和地理热力图等复杂的数据展示需求。本文将深入探讨如何使用 ECharts 制作地图与地理热力图，并提供具体的代码示例来辅助理解。
地图基础配置
首先，我们需要引入 ECharts 的 JS 文件到 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>
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
<div id="mapContainer" style="width: 100%; height: 600px;"></div>
<script>
// 初始化 ECharts 图表实例
const myChart = echarts.init(document.getElementById('mapContainer'));
// 地图数据
const geoData = [
{ name: '北京', value: [116.404, 39.915] },
{ name: '上海', value: [121.473, 31.230] },
{ name: '广州', value: [113.264, 23.129] },
{ name: '深圳', value: [114.057, 22.543] },
{ name: '成都', value: [104.066, 30.604] }
];
// 地图配置项
const option = {
geo: {
map: 'china',
roam: true,
itemStyle: {
normal: {
areaColor: '#ccc',
borderColor: '#fff'
},
emphasis: {
areaColor: '#999'
}
},
label: {
emphasis: {
show: true,
fontSize: 14,
color: '#fff'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: geoData.map(item => ({
name: item.name,
value: item.value
})),
symbolSize: function(val) {
return val[2] * 2;
},
label: {
normal: {
formatter: '{b}',
position: 'right'
}
},
itemStyle: {
color: '#f60'
}
}
]
};
// 设置选项并渲染
myChart.setOption(option);
</script>
</body>
</html>在这个示例中，我们首先通过 CDN 引入了 ECharts 的 JS 文件。然后，我们创建了一个 ID 为 mapContainer 的 div 元素作为地图容器。接下来，定义了地图数据和配置项。配置项中包括地图的显示方式、缩放功能、图标的样式以及数据点的显示。最后，我们设置了图表选项并渲染到了页面上。
地理热力图制作
地理热力图是一种基于地图的热力图，通常用于展示某个区域的密度或热度。在 ECharts 中，可以通过 heatmap 类型实现地理热力图。
<!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.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
<div id="heatmapContainer" style="width: 100%; height: 600px;"></div>
<script>
const heatmapData = [
['北京', 10],
['上海', 15],
['广州', 8],
['深圳', 12],
['成都', 18]
];
const option = {
visualMap: {
min: 0,
max: 20,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
}
},
series: [
{
type: 'heatmap',
coordinateSystem: 'geo',
data: heatmapData.map(item => ({
location: item[0].split(',').map(Number),
value: item[1]
})),
radius: '80%',
hoverAnimation: false
}
],
geo: {
map: 'china',
roam: true,
itemStyle: {
normal: {
areaColor: '#ccc',
borderColor: '#fff'
},
emphasis: {
areaColor: '#999'
}
},
label: {
emphasis: {
show: true,
fontSize: 14,
color: '#fff'
}
}
}
};
const myChart = echarts.init(document.getElementById('heatmapContainer'));
myChart.setOption(option);
</script>
</body>
</html>在上面的代码中，我们首先定义了热力图的数据，其中包含了每个区域的名称和对应的值。接着，我们设置了热力图的配置项，包括颜色范围、颜色映射规则以及热力图的大小。最后，我们渲染了热力图到页面上。
通过这两个示例，我们可以看到如何在 ECharts 中创建地图和地理热力图。这些图表类型非常适合用来展示地理分布和密度分析，是数据可视化中的重要工具。
站点信息
- 建站时间：2017-10-06
- 网站程序：Koa+Vue
- 本站运行：
- 文章数量：
- 总访问量：
- 微信公众号：扫描二维码，关注我
