1.首先準備中國城市分布Geo數據 china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467

注：此數據集為三維地球中國的城市分布數據，經緯度與二維平面數據有所偏差。可通過處理應用于二維平面中國地圖

（奉上處理文件鏈接https://download.csdn.net/download/heal_l/75672138 ）

2.引入?echarts 插件 ，并繪制地圖

import * as echarts from 'echarts' // 注冊繪制中國地圖 echarts.registerMap('china', q(chinaJson))

registerMap(mapName,opt):

• ?mapName:?地圖名稱，在?geo?組件或者?map?圖表類型中設置的?map?對應的就是該值。
• opt :

geoJSON : 可選。GeoJson 格式的數據，可以是 JSON 字符串，也可以是解析得到的對象

svg : 可選。SVG 格式的數據。可以是字符串，也可以是解析得到的 SVG DOM 對象

specialAreas :可選。將地圖中的部分區域縮放到合適的位置。(只在?geoJSON?中生效，svg?中不生效)

3.option中配置geo地圖顯示樣式

// 地圖配置geo: {nameMap: {China: '中國',},map: 'china',label: {emphasis: {show: false,},},// 當前視角的縮放比例zoom: 2.15, // 2.3left: -300,top: 250,// scale 地圖的長寬比aspectScale: 1,itemStyle: {normal: {borderColor: '#21EAFD', // 區域邊框顏色areaColor: 'rgba(255,255,255,0)', // 區域顏色borderWidth: 1, // 區域邊框寬度shadowBlur: 5,shadowColor: 'rgba(107,91,237,.7)',},emphasis: {borderColor: '#FFD1A3',areaColor: 'rgba(102,105,240,.3)',borderWidth: 1,shadowBlur: 5,shadowColor: 'rgba(135,138,255,.5)',},},},

?配置項可根據官網給定選項配置

注意：map的名稱必須同繪制地圖API?registerMap 的第一個參數名稱一致

4.將配置項引入到Echart實例中

總結

以上是生活随笔為你收集整理的Echarts——中国地图绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。