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)
![Linux[基礎指令][2]](http://pic.xiahunao.cn/Linux[基礎指令][2])
![[密碼學基礎]國密算法深度解析：中國密碼標準的自主化之路](http://pic.xiahunao.cn/[密碼學基礎]國密算法深度解析：中國密碼標準的自主化之路)
