1.首先準(zhǔn)備中國城市分布Geo數(shù)據(jù) china.jsonhttps://download.csdn.net/download/heal_l/75671467https://download.csdn.net/download/heal_l/75671467

注：此數(shù)據(jù)集為三維地球中國的城市分布數(shù)據(jù)，經(jīng)緯度與二維平面數(shù)據(jù)有所偏差?？赏ㄟ^處理應(yīng)用于二維平面中國地圖

（奉上處理文件鏈接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?圖表類型中設(shè)置的?map?對應(yīng)的就是該值。
• opt :

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

svg : 可選。SVG 格式的數(shù)據(jù)?？梢允亲址?#xff0c;也可以是解析得到的 SVG DOM 對象

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

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

// 地圖配置geo: {nameMap: {China: '中國',},map: 'china',label: {emphasis: {show: false,},},// 當(dāng)前視角的縮放比例zoom: 2.15, // 2.3left: -300,top: 250,// scale 地圖的長寬比aspectScale: 1,itemStyle: {normal: {borderColor: '#21EAFD', // 區(qū)域邊框顏色areaColor: 'rgba(255,255,255,0)', // 區(qū)域顏色borderWidth: 1, // 區(qū)域邊框?qū)挾萻hadowBlur: 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)',},},},

?配置項可根據(jù)官網(wǎng)給定選項配置

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。