echarts实现山东省的地图
时间: 2025-08-23 13:00:00 浏览: 4
要在 ECharts 中实现山东省地图的显示,首先需要确保引入了正确的地图数据。ECharts 本身提供了中国各省份的地图数据,但为了更精确地展示山东省的行政区划,通常需要使用自定义的 GeoJSON 数据。以下是一个完整的实现示例,涵盖地图数据的准备、加载和基本渲染。
### 地图数据准备
ECharts 支持 GeoJSON 格式的地图数据。可以从公开的中国行政区划数据源获取山东省的 GeoJSON 文件,确保其包含省级边界和市级行政区划信息[^2]。
### 引入 ECharts 和地图数据
在 HTML 文件中引入 ECharts 和山东省的 GeoJSON 数据,可以使用如下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>山东省地图示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-geojson@latest/shandong.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:800px;"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// 注册山东省地图数据
echarts.registerMap('shandong', shandong);
// 配置项
var option = {
title: {
text: '山东省地图示例',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
text: ['高值', '低值'],
calculable: true
},
geo: {
map: 'shandong',
type: 'map',
zoom: 1.2,
center: [117.66, 36.65],
label: {
show: true,
emphasis: {
show: true
}
},
itemStyle: {
areaColor: '#f2f2f2',
borderColor: '#999'
},
emphasis: {
itemStyle: {
areaColor: '#eac736'
}
}
},
series: [{
name: '示例数据',
type: 'map',
data: [
{ name: '济南市', value: 500 },
{ name: '青岛市', value: 800 },
{ name: '淄博市', value: 300 },
{ name: '枣庄市', value: 450 },
{ name: '东营市', value: 600 },
{ name: '烟台市', value: 700 },
{ name: '潍坊市', value: 400 },
{ name: '济宁市', value: 350 },
{ name: '泰安市', value: 550 },
{ name: '威海市', value: 650 },
{ name: '日照市', value: 450 },
{ name: '临沂市', value: 500 },
{ name: '德州市', value: 300 },
{ name: '聊城市', value: 400 },
{ name: '滨州市', value: 500 },
{ name: '菏泽市', value: 600 }
]
}]
};
// 使用配置项渲染图表
myChart.setOption(option);
</script>
</body>
</html>
```
### 说明
- **地图数据**:通过 `echarts.registerMap` 注册山东省的地图数据,这里使用的是从 CDN 获取的 `shandong.js`。
- **Geo 配置**:`geo` 用于配置地图的显示样式,包括缩放级别、中心点、区域颜色等。
- **VisualMap**:用于设置数据的可视化映射,将数值映射为颜色深浅。
- **Series 数据**:`series.data` 中的 `value` 字段用于控制每个城市的颜色深浅。
该示例展示了如何在 ECharts 中加载山东省的地图数据并进行基本的可视化展示。如果需要实现钻取功能(从省份到市级再到区县级),则需要在点击事件中动态加载下一级的 GeoJSON 数据并更新图表配置。
阅读全文
相关推荐



















