1，给中国地图绑定click事件
2，click处理函数里能获取到当前点击的是哪个省份
3，点击赋值换json/js各省份 的文件
就是这么简单
A页面
中国地图
<chart
autoresize :options="map"
:style="{height:'600px',width:'100%',}"
@click="mapclick"
@mouseover="mouseover"
>
</chart>
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} <br/> {b}: {c}',
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部分
<chart
autoresize :options="map"
:style="{height:'600px',width:'100%',}"
@click="mapclick"
@mouseover="mouseover"
>
</chart>
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} <br/> {b}: {c}',
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'
