全國json數(shù)據(jù)獲取地址：

https://github.com/lyhmyd1211/GeoMapData_CN

單獨區(qū)域json數(shù)據(jù)獲取地址：

http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

利用echarts通過獲取的json文件繪制所需地圖

代碼示例：

renderMap (map, data) {let chart = $echarts.init(document.getElementById('mainTwo'));this.option.dataRange = {x: '10%',y: '8%',splitList: this.arr,show:this.areaStatMax>0?true:false,color: ['#E0022B', '#E09107', '#A3E00B'],textStyle: {color:'#fff',fontSize: 11}}this.option.series = [{name: map,type: 'map',mapType: map,roam: false,layoutCenter: ['50%', '45%'],//距左百分比，距上百分比layoutSize: "80%",//省份地圖大小為600xp。nameMap:{'china':'中國'},zoom: 1,label: {normal:{show:true,textStyle:{color:'#fff',fontSize: 10}},emphasis: {show: true,textStyle:{color:'#fff',fontSize: 12}}},itemStyle: {normal: {areaColor: 'rgba(0,0,0,0)',borderColor: 'dodgerblue',label: {show: true}},emphasis: {areaColor: 'darkorange'},},data: data}]//鼠標移入地圖不變黃色chart.on("mouseover", function() {chart.dispatchAction({type: "downplay"})})//渲染地圖chart.setOption(this.option, true)window.addEventListener("resize", function() {chart.resize()})} let _self = this$.getJSON('../../../static/china.json', function(res){let d = []for( var i=0; i<res.features.length; i++ ){d.push({name: res.features[i].properties.name,value: Math.random()*100})}//注冊地圖$echarts.registerMap('china', res)//繪制地圖_self.renderMap('china', _self.areaStat)//地圖點擊事件document.click = function (e) { return false; }chart.on('click', function (params) {if(_self.num == 0) {_self.$emit("sheng", 1,params.name)}else if( _self.num == 1 ){_self.$emit("city", 2, params.name)} else if (_self.num == 2) {_self.$emit("xian", 3, params.name)}})})

總結(jié)

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

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