echarts地图学习（使用geoJson数据绘制地图）
参考文档
使用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 `
${obj.img}/>
${params.name}
${params.value}
`
},
},
// 视觉映射组件
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 `
${obj.img}/>
${params.name}
${params.value}
`
},
},
// 视觉映射组件
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>