echars实现自定义山西省地图和地图下钻返回

相信很多人在做项目的时候都需要实现地图的功能，本篇文章主要实现了echar自定义地图、下钻以及返回上一层的功能。

生成地图的代码如下，这里应用的json文件是网络链接形式的，所以需要的朋友可以直接复制代码，然后导入jquery.js文件以及echars.js文件，即可显示 全部代码如下//省级地图

function shengji(){ $.get('https://geo.datav.aliyun.com/areas_v2/bound/140000_full.json', function (chinaJson) { echarts.registerMap('chongqing', chinaJson); // 给数据命名，本人理解 var chart = echarts.init(document.getElementById('main8')); chart.setOption({ title: { text: '中国 山西省 站点详情', left: 'center', textStyle: { color: 'white', fontStyle: 'normal', fontWeight: 'bold', fontSize: 32, lineHeight: 80, textBorderColor: 'green', textBorderWidth: 1, textShadowColor: 'green', textShadowBlur: 10, textShadowOffsetX: 2, textShadowOffsetY: 2 } }, series: [{ name: 'chongqing', type: 'map', mapType: 'chongqing', roam:true, selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选 label: { normal: { textStyle: { fontSize: 12, fontWeight: 'bold', color: '#0090FF' } } }, itemStyle: { normal: { borderWidth:3, areaColor:'#0C2452', label: { show: true,//默认是否显示省份名称 }, areaStyle: { color: '#0655B7',//默认的地图板块颜色 }, borderWidth:3, borderColor:'#0655B7', }, emphasis: { borderColor: '#2378f7', // 图形的描边颜色 #2378f7 borderWidth: '1', areaColor: '#233F53', // 阴影色 #233F53 label: { show: false, textStyle: { color: '#fff', fontSize: 14, } }, }, }, //此为加载的数据 }] }); //点击事件 chart.on('click', function(properties) { shiji(properties.name) }) }); } //市级地图 function shiji(city){ var src=null; /*此出的路径为你点击的市级json数据的路径，可以跟据闯过来的城市参数设置相应的json文件，获取json文件的地址为http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5 $.get('https://geo.datav.aliyun.com/areas/bound/geojson?code=141100_full', function (chinaJson) { echarts.registerMap('city', chinaJson); // 给数据命名，本人理解 var chart1 = echarts.init(document.getElementById('main8')); chart1.setOption({ title: { text: '中国 山西省 '+city, left: 'center', textStyle: { color: 'white', fontStyle: 'normal', fontWeight: 'bold', fontSize: 32, lineHeight: 80, textBorderColor: 'green', textBorderWidth: 1, textShadowColor: 'green', textShadowBlur: 10, textShadowOffsetX: 2, textShadowOffsetY: 2 } }, series: [{ name: 'city', type: 'map', mapType: 'city', roam:true, selectedMode: false,//single 表示单选;multiple表示多选 默认flase不选 label: { normal: { textStyle: { fontSize: 12, fontWeight: 'bold', color: '#0090FF' } } }, itemStyle: { normal: { borderWidth:3, areaColor:'#0C2452', label: { show: true,//默认是否显示省份名称 }, areaStyle: { color: '#0655B7',//默认的地图板块颜色 }, borderWidth:3, borderColor:'#0655B7', }, emphasis: { borderColor: '#2378f7', // 图形的描边颜色 #2378f7 borderWidth: '1', areaColor: '#233F53', // 阴影色 #233F53 label: { show: false, textStyle: { color: '#fff', fontSize: 14, } }, }, }, }] }); //屏蔽div内的右键点击事件 let canvas = document.getElementById("main8"); canvas.oncontextmenu = function(){return false;}; chart1.on('contextmenu',function(properties){ //鼠标右键事件，显示右键返回上一级 $('#context-menu').css({ left: properties.event.offsetX, top: properties.event.offsetY }) shengji(); }) }); }

其实这个方法是比较笨的，但是我也是第一次做这个，算是给自己做个笔记吧，需要的可以直接复制进行测试，谢谢大家的访问