1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > geojson全国各省市区地图json数据绘制Echarts区域地图

geojson全国各省市区地图json数据绘制Echarts区域地图

时间:2024-02-08 13:28:14

相关推荐

geojson全国各省市区地图json数据绘制Echarts区域地图

全国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)}})})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。