参考文档
使用echarts完成中国省市区县镇地图展示
echarts地图（中国地图展示各省数据）
echarts实现中国地图区域分布图 vue + echarts
利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果
可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据
vue使用echarts来绘制中国地图下钻省市区县级地图
Echarts地图详解（地图样式、合并地图、增加地图）
Echarts使用百度地图服务
降水量案例（使用geoJson数据绘制地图）
效果图
安装 ECharts
npm install echarts --save
方法一：全局注册
在main.js全局注册
const echarts = require('echarts')Vue.prototype.$echarts = echarts
组件使用
var myChart = this.$echarts.init(document.getElementById('myChart'));myChart.setOption(this.option);
方法二：组件直接引用
组件使用
import * as echarts from 'echarts';var chinaChart = echarts.init(document.getElementById("mapContain"));chinaChart.setOption(this.option);
注：下面用的方法即组件直接引用
地图geoJson数据引用
1、获取地图数据
dataV地图数据下载地址
网友分享json文件
2、组件引用（常用两种文件.js或者.json）
//import china from '@/config/china.js'import china from '@/config/china.json'
3、ECharts地图注册
echarts.registerMap('china', china)
绘制中国地图
mounted () {this.drawMap()},methods: {drawMap () {echarts.registerMap('china', china)var chinaChart = echarts.init(document.getElementById("mapContain"));chinaChart.setOption(this.option);}}
data () {return {option: {// geo: {// map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致// roam: true, //缩放// label: { show: true }, //是否显示省份名称// zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图// },//鼠标移上去时显示悬浮框tooltip: {backgroundColor: '#92DCC6',padding: 0,trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。//模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。formatter: (params) => {console.log(params)let obj = {img: require('@/assets/logo.png') }return `<div style="text-align: center;"><img src=${obj.img}/><p>${params.name}</p><p>${params.value}</p><div>`},},// 视觉映射组件visualMap: [{type: 'continuous',//类型为连续型min: 0,max: 1000,// range: [100, 400],left: 'left',top: 'bottom',text: ['高', '低'],//取值范围的文字textStyle: {color: "#fff"},inRange: {color: ['#e0ffff', '#006edd']//取值范围的颜色},}],series: [{type: 'map',name: "降水量",map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致roam: true, //缩放zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图label: {show: true,//是否显示省份名称color: "#fff"},itemStyle: {areaColor: '#AAD5FF',//地图区域背景颜色borderColor: '#fff'//地图边界颜色},//高亮时的设置emphasis: {//高亮时地图区域背景颜色itemStyle: {areaColor: 'pink',},//文字颜色，样式在此处label: {color: '#fff'}},// 数据data: [{name: "北京", value: Math.round(Math.random() * 1000) },{name: "天津", value: Math.round(Math.random() * 1000) },{name: "上海", value: Math.round(Math.random() * 1000) },{name: "重庆", value: Math.round(Math.random() * 1000) },{name: "河北省", value: Math.round(Math.random() * 1000) },{name: "河南省", value: Math.round(Math.random() * 1000) },{name: "云南省", value: Math.round(Math.random() * 1000) },{name: "辽宁省", value: Math.round(Math.random() * 1000) },{name: "黑龙江省", value: Math.round(Math.random() * 1000) },{name: "湖南省", value: Math.round(Math.random() * 1000) },{name: "安徽省", value: Math.round(Math.random() * 1000) },{name: "山东省", value: Math.round(Math.random() * 1000) },{name: "江苏省", value: Math.round(Math.random() * 1000) },{name: "浙江省", value: Math.round(Math.random() * 1000) },{name: "江西省", value: Math.round(Math.random() * 1000) },{name: "湖北省", value: Math.round(Math.random() * 1000) },{name: "甘肃省", value: Math.round(Math.random() * 1000) },{name: "山西省", value: Math.round(Math.random() * 1000) },{name: "陕西省", value: Math.round(Math.random() * 1000) },{name: "吉林省", value: Math.round(Math.random() * 1000) },{name: "福建省", value: Math.round(Math.random() * 1000) },{name: "贵州省", value: Math.round(Math.random() * 1000) },{name: "广东省", value: Math.round(Math.random() * 1000) },{name: "青海省", value: Math.round(Math.random() * 1000) },{name: "四川省", value: Math.round(Math.random() * 1000) },{name: "海南省", value: Math.round(Math.random() * 1000) },{name: "西藏", value: Math.round(Math.random() * 1000) },{name: "宁夏", value: Math.round(Math.random() * 1000) },{name: "新疆", value: Math.round(Math.random() * 1000) },{name: "内蒙古", value: Math.round(Math.random() * 1000) },{name: "广西", value: Math.round(Math.random() * 1000) },{name: "台湾省", value: Math.round(Math.random() * 1000) },{name: "香港", value: Math.round(Math.random() * 1000) },{name: "澳门", value: Math.round(Math.random() * 1000) }],// 数据映射 同china文件中的name进行映射nameMap: {"北京市": "北京","天津市": "天津","上海市": "上海","重庆市": "重庆","西藏自治区": "西藏","宁夏回族自治区": "宁夏","新疆维吾尔自治区": "新疆","内蒙古自治区": "内蒙古","广西壮族自治区": "广西",},}],}}},
降水量案例完整代码
<template><div class="home"><div id="mapContain"style="width:1000px;height:800px;background-color:#050512;"></div></div></template><script>import china from '@/config/china.js'// import china from '@/config/china.json'import * as echarts from 'echarts';export default {components: {},data () {return {option: {// geo: {// map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致// roam: true, //缩放// label: { show: true }, //是否显示省份名称// zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图// },//鼠标移上去时显示悬浮框tooltip: {backgroundColor: '#92DCC6',padding: 0,trigger: 'item',//设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。//模板字符串渲染悬浮框，注意图片的引入方式（require）,否则无法显示。formatter: (params) => {console.log(params)let obj = {img: require('@/assets/logo.png') }return `<div style="text-align: center;"><img src=${obj.img}/><p>${params.name}</p><p>${params.value}</p><div>`},},// 视觉映射组件visualMap: [{type: 'continuous',//类型为连续型min: 0,max: 1000,// range: [100, 400],left: 'left',top: 'bottom',text: ['高', '低'],//取值范围的文字textStyle: {color: "#fff"},inRange: {color: ['#e0ffff', '#006edd']//取值范围的颜色},}],series: [{type: 'map',name: "降水量",map: 'china',//这里的名称需要和 echarts.registerMap('china',{})中的名称一致roam: true, //缩放zoom: 1.2,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图label: {show: true,//是否显示省份名称color: "#fff"},itemStyle: {areaColor: '#AAD5FF',//地图区域背景颜色borderColor: '#fff'//地图边界颜色},//高亮时的设置emphasis: {//高亮时地图区域背景颜色itemStyle: {areaColor: 'pink',},//文字颜色，样式在此处label: {color: '#fff'}},// 数据data: [{name: "北京", value: Math.round(Math.random() * 1000) },{name: "天津", value: Math.round(Math.random() * 1000) },{name: "上海", value: Math.round(Math.random() * 1000) },{name: "重庆", value: Math.round(Math.random() * 1000) },{name: "河北省", value: Math.round(Math.random() * 1000) },{name: "河南省", value: Math.round(Math.random() * 1000) },{name: "云南省", value: Math.round(Math.random() * 1000) },{name: "辽宁省", value: Math.round(Math.random() * 1000) },{name: "黑龙江省", value: Math.round(Math.random() * 1000) },{name: "湖南省", value: Math.round(Math.random() * 1000) },{name: "安徽省", value: Math.round(Math.random() * 1000) },{name: "山东省", value: Math.round(Math.random() * 1000) },{name: "江苏省", value: Math.round(Math.random() * 1000) },{name: "浙江省", value: Math.round(Math.random() * 1000) },{name: "江西省", value: Math.round(Math.random() * 1000) },{name: "湖北省", value: Math.round(Math.random() * 1000) },{name: "甘肃省", value: Math.round(Math.random() * 1000) },{name: "山西省", value: Math.round(Math.random() * 1000) },{name: "陕西省", value: Math.round(Math.random() * 1000) },{name: "吉林省", value: Math.round(Math.random() * 1000) },{name: "福建省", value: Math.round(Math.random() * 1000) },{name: "贵州省", value: Math.round(Math.random() * 1000) },{name: "广东省", value: Math.round(Math.random() * 1000) },{name: "青海省", value: Math.round(Math.random() * 1000) },{name: "四川省", value: Math.round(Math.random() * 1000) },{name: "海南省", value: Math.round(Math.random() * 1000) },{name: "西藏", value: Math.round(Math.random() * 1000) },{name: "宁夏", value: Math.round(Math.random() * 1000) },{name: "新疆", value: Math.round(Math.random() * 1000) },{name: "内蒙古", value: Math.round(Math.random() * 1000) },{name: "广西", value: Math.round(Math.random() * 1000) },{name: "台湾省", value: Math.round(Math.random() * 1000) },{name: "香港", value: Math.round(Math.random() * 1000) },{name: "澳门", value: Math.round(Math.random() * 1000) }],// 数据映射 同china文件中的name进行映射nameMap: {"北京市": "北京","天津市": "天津","上海市": "上海","重庆市": "重庆","西藏自治区": "西藏","宁夏回族自治区": "宁夏","新疆维吾尔自治区": "新疆","内蒙古自治区": "内蒙古","广西壮族自治区": "广西",},}],}}},mounted () {this.drawMap()},methods: {drawMap () {echarts.registerMap('china', china)var chinaChart = echarts.init(document.getElementById("mapContain"));chinaChart.setOption(this.option);}}};</script>
