1，给中国地图绑定click事件
2，click处理函数里能获取到当前点击的是哪个省份
3，点击赋值换json/js各省份 的文件
就是这么简单
A页面
中国地图
autoresize :options="map" :style="{height:'600px',width:'100%',}" @click="mapclick" @mouseover="mouseover" > js部分 import echartsfrom 'echarts' import 'echarts/map/js/china'; //引入中国地图 data() { return { map:{ // backgroundColor: '#1D346F', title: { text:'', subtext:'', x:'center' }, // dataRange: { // show: false, // min: 0, // max: 1000, // text: ['High', 'Low'], // realtime: true, // calculable: true, // color: ['#040B5C',], // // backgroundColor:'#040B5C' // }, tooltip: {//提示框组件。 trigger:'item', //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 formatter:'{a} textStyle: { fontSize:'24px' } }, legend: { show:false, clockWise:false, orient:'horizontal', //图例的排列方向 x:'left', //图例的位置 data: [''] }, // visualMap: {//颜色轴，可以根据数据点的值大小，展示不同的颜色，或用来展示地图块的不同颜色 // min: 0, // max: 200, // calculable: true, // inRange: { // color: ["#3dda8e", "#eac736", "#d94e5d"] // }, // textStyle: { // color: "#fff" // }}, geo: [{ show:true, // map: 'china', clockWise:false, label: { normal: { show:false }, emphasis: { show:false, } }, roam:true,//地图设置不可拖拽，固定的 itemStyle: { normal: { areaColor:'#031525', borderWidth:0, shadowColor:'#0CC6FF', shadowBlur:30, shadowOffsetX: -5, shadowOffsetY:10, color:"#0CC6FF", }, emphasis: { areaColor:"#2B91B7" } } }], series: [ { name:'', // itemStyle: { // normal: { // color: "#F62157" //标志颜色 // } // }, type:'map', mapType:'china', roam:true, clockWise:false, zoom:1, // data: [18, 23, 29, 14, 13, 63, 63, 63, 63, 63], data: [{ "name":"北京", "value":599, color:'#fffed7' }, { "name":"上海", "value":142 }, { "name":"黑龙江", "value":44 }, { "name":"深圳", "value":92 }, { "name":"湖北", "value":810 }, { "name":"四川", "value":453 }], geoIndex:1, itemStyle: { normal: { areaColor:'#1D346F', borderColor:'#0CC6FF', // borderWidth: 0, // shadowColor: '#D79D3D', }, emphasis: { label: { show:true } } }, }, ] }, methods: { mapclick(el){ console.log(el.name) console.log() let name= el.name this.$router.push({ path:"/province", query:{ name:name } }) }, B页面 省级地图 div部分 autoresize :options="map" :style="{height:'600px',width:'100%',}" @click="mapclick" @mouseover="mouseover" > js部分 import echartsfrom 'echarts' // import 'echarts/map/js/china' //引入中国地图 //引入广东地图 import 'echarts/map/js/province/guangdong.js' // 重庆 import 'echarts/map/js/province/chongqing.js' //安徽 import 'echarts/map/js/province/anhui.js' //北京 import 'echarts/map/js/province/beijing.js' //北京 import 'echarts/map/js/province/beijing.js' //海南 import 'echarts/map/js/province/hainan.js' //西藏 import 'echarts/map/js/province/xizang.js' //浙江 import 'echarts/map/js/province/zhejiang.js' //云南 import 'echarts/map/js/province/yunnan.js' //新疆 import 'echarts/map/js/province/xinjiang.js' //天津 import 'echarts/map/js/province/tianjin.js' //四川 import 'echarts/map/js/province/sichuan.js' //山西 import 'echarts/map/js/province/shanxi.js' //陕西 import 'echarts/map/js/province/shanxi1.js' //上海 import 'echarts/map/js/province/shanghai.js' //山东 import 'echarts/map/js/province/shandong.js' //青海 import 'echarts/map/js/province/qinghai.js' //宁夏 import 'echarts/map/js/province/ningxia.js' //内蒙古 import 'echarts/map/js/province/neimenggu.js' //辽宁 import 'echarts/map/js/province/liaoning.js' //吉林 import 'echarts/map/js/province/jilin.js' //江西 import 'echarts/map/js/province/jiangxi.js' //江苏 import 'echarts/map/js/province/jiangsu.js' //湖南 import 'echarts/map/js/province/hunan.js' //湖北 import 'echarts/map/js/province/hubei.js' //河南 import 'echarts/map/js/province/henan.js' //黑龙江 import 'echarts/map/js/province/heilongjiang.js' //河北 import 'echarts/map/js/province/hebei.js' //贵州 import 'echarts/map/js/province/guizhou.js' //广西 import 'echarts/map/js/province/guangxi.js' //广东 import 'echarts/map/js/province/guangdong.js' //甘肃 import 'echarts/map/js/province/gansu.js' //澳门 import 'echarts/map/js/province/aomen.js' //福建 import 'echarts/map/js/province/fujian.js' //香港 import 'echarts/map/js/province/xianggang.js' // 省级别地图 map:{ title: { text:'', subtext:'', x:'center' }, tooltip: {//提示框组件。 trigger:'item', //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 formatter:'{a} textStyle: { fontSize:'24px' } }, legend: { show:false, clockWise:false, orient:'horizontal', //图例的排列方向 x:'left', //图例的位置 data: [''] }, geo: [{ show:true, // map: 'china', clockWise:false, label: { normal: { show:false }, emphasis: { show:false, } }, roam:true,//地图设置不可拖拽，固定的 itemStyle: { normal: { areaColor:'#031525', borderWidth:0, shadowColor:'#0CC6FF', shadowBlur:30, shadowOffsetX: -5, shadowOffsetY:10, color:"#0CC6FF", }, emphasis: { areaColor:"#2B91B7" } } }], series: [ { name:'', type:'map', mapType:'重庆', roam:true, clockWise:false, zoom:1, // data: [18, 23, 29, 14, 13, 63, 63, 63, 63, 63], data: [{ "name":"北京", "value":599, color:'#fffed7' }, { "name":"上海", "value":142 }, { "name":"黑龙江", "value":44 }, { "name":"深圳", "value":92 }, { "name":"湖北", "value":810 }, { "name":"四川", "value":453 }], geoIndex:1, itemStyle: { normal: { areaColor:'#1D346F', borderColor:'#0CC6FF', // borderWidth: 0, // shadowColor: '#D79D3D', }, emphasis: { label: { show:true } } }, }, ] }, mounted() { let me =this //url query传参 let routeQuery =this.$route.query me.map.series[0].mapType=routeQuery.name }, //中国 import zhongguofrom 'echarts/map/json/china' //海南 import hainanfrom 'echarts/map/json/province/hainan' //西藏 import xizangfrom 'echarts/map/json/province/xizang' //浙江 import zhejiangfrom 'echarts/map/json/province/zhejiang' //云南 import yunnanfrom 'echarts/map/json/province/yunnan' //新疆 import xinjiangfrom 'echarts/map/json/province/xinjiang' //天津 import tianjinfrom 'echarts/map/json/province/tianjin' //四川 import sichuanfrom 'echarts/map/json/province/sichuan' //陕西 import shanxifrom 'echarts/map/json/province/shanxi' //山西 import shangxifrom 'echarts/map/json/province/shanxi1' //上海 import shanghaifrom 'echarts/map/json/province/shanghai' //山东 import shangdongfrom 'echarts/map/json/province/shandong' //青海 import qinghaifrom 'echarts/map/json/province/qinghai' //宁夏 import ningxiafrom 'echarts/map/json/province/ningxia' //内蒙古 import neimenggufrom 'echarts/map/json/province/neimenggu' //辽宁 import liaoningfrom 'echarts/map/json/province/liaoning' //吉林 import jilinfrom 'echarts/map/json/province/jilin' //江西 import jiangxifrom 'echarts/map/json/province/jiangxi' //江苏 import jiangsufrom 'echarts/map/json/province/jiangsu' //湖南 import hunanfrom 'echarts/map/json/province/hunan' //湖北 import hubeifrom 'echarts/map/json/province/hubei' //河南 import henanfrom 'echarts/map/json/province/henan' //黑龙江 import heilongjiangfrom 'echarts/map/json/province/heilongjiang' //河北 import hebeifrom 'echarts/map/json/province/hebei' //贵州 import guizhoufrom 'echarts/map/json/province/guizhou' //广西 import guangxifrom 'echarts/map/json/province/guangxi' //广东 import guangdongfrom 'echarts/map/json/province/guangdong' //甘肃 import gansufrom 'echarts/map/json/province/gansu' //重庆 import chongqingfrom 'echarts/map/json/province/chongqing' //澳门 import aomenfrom 'echarts/map/json/province/aomen' //安徽 import anhuifrom 'echarts/map/json/province/anhui' //北京 import beijingfrom 'echarts/map/json/province/beijing' //福建 import fujianfrom 'echarts/map/json/province/fujian' //香港 import xianggangfrom 'echarts/map/json/province/xianggang'
{b}: {c}',
{b}: {c}',