全国json数据获取地址:
/lyhmyd1211/GeoMapData_CN
单独区域json数据获取地址:
/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)}})})