效果图：
1.点击省，跳转到河北省
2.返回，从省返回到中国地图
话不多说，直接上代码，1.复制粘贴，2.在引入对应js即可
注：全部各省地图，下载地址：**
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.echart {width: 500px;height: 500px;}</style><style>.backBtn{display: none;background: #cccccc;cursor: pointer;}.backBtn.active{display: inline-block;}</style></head><body><div class="backBtn" id="backBtn">返回中国地图</div><div class="echart" id="worldMap"></div><script src="../jquery.min.js" charset="utf-8"></script><script src="../echarts.js"></script><script src="china.js"></script><script>var mapData = [ //自己做的模拟数据 后续根据业务展示{name: '湖北', value: 88},{name: '广东', value: 24},{name: '上海', value: 5},{name: '山东', value: 15},{name: '湖南', value: 14},{name: '重庆', value: 0},{name: '四川', value: 65},{name: '新疆', value: 36},{name: '黑龙江', value: 12},{name: '西藏', value: 68},{name: '青海', value: 31},{name: '内蒙古', value: 28},{name: '陕西', value: 12},{name: '辽宁', value: 88},{name: '云南', value: 23},]// var provinceData = [ //省份公司的数据// {name: '新疆', value: 23, children: ['福田', '南山', '龙华']},// {name: '河北', value: 23, children: ['衡水', '张家口', '承德']},// ]var provinces = { //数据台湾: 'taiwan',河北: 'hebei',山西: 'shanxi',辽宁: 'liaoning',吉林: 'jilin',黑龙江: 'heilongjiang',江苏: 'jiangsu',浙江: 'zhejiang',安徽: 'anhui',福建: 'fujian',江西: 'jiangxi',山东: 'shandong',河南: 'henan',湖北: 'hubei',湖南: 'hunan',广东: 'guangdong',海南: 'hainan',四川: 'sichuan',贵州: 'guizhou',云南: 'yunnan',陕西: 'shanxi1',甘肃: 'gansu',青海: 'qinghai',新疆: 'xinjiang',广西: 'guangxi',内蒙古: 'neimenggu',宁夏: 'ningxia',西藏: 'xizang',北京: 'beijing',天津: 'tianjin',上海: 'shanghai',重庆: 'chongqing',香港: 'xianggang',澳门: 'aomen'}var isReturnChina = false //是否显示返回中国地图function clickRoute(){alert("点击了,做其他操作!")// this.$router.push('/')}function chinaMapHidden(chinaMap) {let that = thischinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空chinaMap.on('click',async function(params){// if (params.name in that.provinces) {// let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`);// if (s){//worldMap(params.name)// }// }if(provinces.hasOwnProperty(params.name)){// var mapName =provinces[params.name]// $.getScript('js/province/'+mapName+'.js',function(){// newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数// });// worldMap(mapName)newMapFu(params.name)}})}//加载各省地图function newMapFu(mapName){var nameEn = provinces[mapName]var js = document.createElement('script');js.src = 'js/province/'+nameEn+'.js';document.body.appendChild(js);setTimeout(function (){$('#backBtn').addClass('active');worldMap(mapName)},100)console.log(mapName)}//返回中国地图$('#backBtn').on('click',function (){$('#backBtn').removeClass('active');worldMap('china')});function getMapJson(mapName) {var def = $.Deferred();var url = 'http://localhost:9075'+ '/projectManagement/public/echarts/map/json/province/'+mapName+'.json';$.ajax({type: 'get',url: url,data: {},dataType: 'json',success: function (data) {if (data.status == 'STATUS_SUCCESS') {def.resolve(data);def.promise(data);} else if (data.status == 'STATUS_FAIL') {def.resolve(data);def.promise(data);} else {def.resolve(data);def.promise(data);}},error: function (data) {def.reject(data);def.promise(data);}});return def;};</script><script>//初始化echartsvar myChartMap;// worldMap('hebei'); //世界地图worldMap('china'); //世界地图function worldMap(mapName) {// myChart.showLoading({// text: 'loading',// color: '#c23531',// textColor: '#000',// maskColor: 'rgba(255, 255, 255, 0.2)',// zlevel: 0,// });// myChart.hideLoading();/*标准必要专利数量排行-echart*/var echartNameDataArr = []; //X轴企业名称var echartNumDataArr = []; //Y轴标准数量// ajaxListByPatent().then(function (declEntityList) {// var i = 0;// repeat();// function repeat() {//if (i < declEntityList.length) {// //企业没名字的移除// ajaxcountByDeclEntity(declEntityList[i].name).then(function (declEntityNum) {// echartNameDataArr.push(declEntityList[i].name);// echartNumDataArr.push(declEntityNum);// i++;// repeat();// });//} else {// console.log('Standard', echartNameDataArr, echartNumDataArr);// echartSetOption();//构建标准分布 echarts//}// }echartSetOption(mapName);//构建标准分布 echarts//标准必要专利数量排行 echartsfunction echartSetOption(mapName) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('worldMap'));if (myChart != null && myChart != "" && myChart != undefined) {myChart.dispose();}// getMapJson('hebei').then(function (data){// echarts.registerMap('hebei', data);// myChart = echarts.init(document.getElementById('worldMap'));// myChart.setOption({// series: [{//type: 'map',//map: 'hebei'// }]// });myChart = echarts.init(document.getElementById('worldMap'));var mapDataList = [{name: "南海诸岛",value: 0},{name: '北京',value: 54}];var visualMapParams = {min: mapDataList[0].value,max: mapDataList.slice(-1)[0].value,}var option = {tooltip: {show: true,triggerOn: "click",formatter: function(e, t, n) {// return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.valueconsole.log('dsadsads',e)var name = e.namevar toolipData = []// chinaMapHidden(name);// newMapFu(name);provinceData.forEach(item=>{if(name == item.name){// toolipData = item.children}})var htmlStr = ''toolipData.forEach(item=>{htmlStr += `<li class="list-li" name="${item}"><div οnclick="clickRoute()" >${item}</div></li>`})return `<div class="list-wrap"><div class="list-title">${name}</div><ul class="list-ul">${htmlStr}</ul></div>`}},//工具：数据、下载、还原toolbox: {show: true,orient: 'vertical',// left: '',right: '20px',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 0,max: 1000,left: 26,bottom: 40,showLabel: !0,text: ["高", "低"],calculable: true,//可筛选show: false},geo: {map: mapName,//"china"// map: '河北',//"china"// center: [104.114129, 37.550339],//当前视角的中心点zoom: 1, //当前视角的缩放比例roam: true, //是否开启平游或缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2},// top: 80,label: {normal: {show: !0,fontSize: "14",color: "rgba(0,0,0,0.7)"}},itemStyle: {normal: {//shadowBlur: 50,//shadowColor: 'rgba(0, 0, 0, 0.2)',borderColor: "rgba(0, 0, 0, 0.2)"},emphasis: {areaColor: "#f2d5ad",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0}}},series: [{name: "确诊病例",type: "map",geoIndex: 0,// data: mapDataListdata: []}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);chinaMapHidden(myChart);//监听自适应大小window.addEventListener("resize", () => {myChart.resize();});})}};</script></body></html>
如果觉得《echarts map中国地图点击各省 跳转展示 从省返回到中国地图【china.js】》对你有帮助，请点赞、收藏，并留下你的观点哦！
