Echarts——中国地图绘制
生活随笔
收集整理的這篇文章主要介紹了
Echarts——中国地图绘制
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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 :
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 养鱼知识交流
- 下一篇: 足球比赛常用英语单词集锦