使用eCharts绘制中国地图
eCharts官网：https://echarts.apache.org/zh/index.html
1. 首先新建一个html页面，并引入echarts
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>eCharts Maptitle>
<link rel="shortcut icon" href="data:;base64,=" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js">script>
head>
<body>
<div id="main" style="width: 800px; height: 800px">div>
body>
html>
2. 接着准备地图数据文件
从 DataV 获取 GeoJson 格式的地图数据：https://datav.aliyun.com/portal/school/atlas/area_selector
- 如果你使用的是.json格式的文件，那么可以用Ajax请求获取返回值为对象格式的变量，例如：
$.get('/data/asset/geo/xxxx.json', function (geoJson) {echarts.registerMap('china', geoJson);})
3. 写js代码，配置echarts
- 可以把你获取的地图数据转换成对象格式存为.js文件，然后在页面中引入此js文件。
const chinaMapData = { type: ‘FeatureCollection’, features: [{ type: ‘Feature’, properties: { adcode: 110000, name: ‘北京市’, }, geometry: { type: ‘MultiPolygon’, coordinates: […], }, }] }
<script src="yourPath/map_china.js"></script>
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
// 使用上面引入的地图数据map_china.js
echarts.registerMap('china', chinaMapData)
const option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + (params.value ? params.value : '无数据')
},
},
visualMap: {
// 是否显示 visualMap-controller
show: false,
left: 0,
bottom: 0,
min: 0,
max: 3000,
text: ['高', '低'],
calculable: true,
type: 'piecewise',
inRange: {
// 数据所对应的颜色块
color: ['#A8D8FF', '#87CEEB', '#4169E1', '#8A2BE2', '#C77DF2', '#B28FCE', '#FF00FF', '#D94D8C', '#C71585', '#FF007F', '#FF4500', '#B22222', '#8B0000'],
},
// 颜色块的区间范围
pieces: [{ lt: 100 }, { gte: 100, lte: 200 }, { gte: 201, lte: 300 }, { gte: 301, lte: 600 }, { gte: 601, lte: 900 }, { gte: 901, lte: 1200 }, { gte: 1201, lte: 1500 }, { gte: 1501, lte: 1800 }, { gte: 1801, lte: 2100 }, { gte: 2101, lte: 2400 }, { gte: 2401, lte: 2700 }, { gte: 2701, lte: 3000 }, { gt: 3000 }],
},
series: [
{
name: '中国地图',
type: 'map',
map: 'china',
roam: true,
left: 0,
right: 0,
top: 0,
bottom: 0,
label: {
show: true, // 显示省份名称
},
selectedMode: false, // 禁止选中
emphasis: { disabled: true }, // 禁止高亮
data: [
// 这里可以添加各省份的数据，格式为 {name: '省份名称', value: 数值}
{ name: '北京市', value: 1 },
{ name: '天津市', value: 100 },
{ name: '河北省', value: 201 },
{ name: '山西省', value: 301 },
{ name: '内蒙古自治区', value: 601 },
{ name: '辽宁省', value: 901 },
{ name: '吉林省', value: 1201 },
{ name: '黑龙江省', value: 1501 },
{ name: '上海市', value: 1801 },
{ name: '江苏省', value: 2101 },
{ name: '浙江省', value: 2401 },
{ name: '安徽省', value: 2701 },
{ name: '福建省', value: 2801 },
{ name: '江西省', value: 3001 },
{ name: '山东省', value: 4001 },
//..........
],
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)