使用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 Map</title><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-controllershow: 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)