vue-echarts 实现中国地图到省vue特别简单tooltip: {//提示框组件。 tooltip: {//提示

1，给中国地图绑定click事件

2，click处理函数里能获取到当前点击的是哪个省份

3，点击赋值换json/js各省份的文件

就是这么简单

A页面

中国地图

<chart

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} <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"

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'