1银亲，給中國地圖綁定click事件
2梗顺，click處理函數(shù)里能獲取到當(dāng)前點(diǎn)擊的是哪個省份
3遍愿，點(diǎn)擊賦值換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', //數(shù)據(jù)項圖形觸發(fā)簿煌，主要在散點(diǎn)圖磁携，餅圖等無類目軸的圖表中使用褒侧。
? ? formatter:'{a} <br/> : {c}',
? ? textStyle: {
fontSize:'24px'
? ? }
},
? legend: {
show:false,
? ? clockWise:false,
? ? orient:'horizontal', //圖例的排列方向
? ? x:'left', //圖例的位置
? ? data: ['']
},
? // visualMap: {//顏色軸颜武，可以根據(jù)數(shù)據(jù)點(diǎn)的值大小璃搜，展示不同的顏色，或用來展示地圖塊的不同顏色
//? 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,//地圖設(shè)置不可拖拽鳞上，固定的
? ? 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" //標(biāo)志顏色
//? }
// },
? ? ? 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'
//內(nèi)蒙古
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', //數(shù)據(jù)項圖形觸發(fā)，主要在散點(diǎn)圖篙议，餅圖等無類目軸的圖表中使用唾糯。
? ? formatter:'{a} <br/> : {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,//地圖設(shè)置不可拖拽鬼贱，固定的
? ? 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'
? //內(nèi)蒙古
? 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'
