echarts 酷炫地图（用好Echart5绘制地图）
echarts 酷炫地图（用好Echart5绘制地图）可以下载中国以及各个省、市、区地图数据。免费的文件下载地址：npm install echarts --save下载地图的 json 数据3、拖动或缩放的时候出现错位，使其同步缩放和拖动1、下载并引入 echartsEcharts 已更新到了 5.0 版本，安装完记得检查下自己的版本是否是 5.0 。
可视化我们已不再陌生，地图也很常用。有很多公司业务范围可能仅限于某个市区，所以画一个 china 地图意义不大，就只需要绘制某个省份或者市区的地图，然后统计各个区域的一个分布情况，具体的效果如图所示：
绘制地图之前，我们先需要明白实现原理是啥样的，然后按照具体的实现步骤，依次实现效果。如果不明白原理，每次完成的都是复制粘贴。
1、开始之前，先确认自己的地图需要分几层，及其作用。
2、该效果实现，需要三层地图实现效果。
- 一层放在最底层，设置地图的边框，对应地图里最外层的蓝色地图线。
- 二层放在中间，实现基本的地图层，显示对应各个区域的名称。
- 三层放在最外层，实现数据标记，对应地图里圆圈和数据。
3、拖动或缩放的时候出现错位，使其同步缩放和拖动
二、echarts 使用五部曲：1、下载并引入 echarts
Echarts 已更新到了 5.0 版本，安装完记得检查下自己的版本是否是 5.0 。
npm install echarts --save
下载地图的 json 数据
可以下载中国以及各个省、市、区地图数据。免费的文件下载地址：
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
下载对应的省份或者市区的地图数据。
引入：
import * as echarts from "echarts"
import chinaJSON from '../../assets/json/china.json'
2、准备容器
给元素定义宽高确定的容器用来装地图。
<template>
<div ref="xian"></div>
</template>
3、实例化 echarts 对象
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
var myChart = echarts.init(xian.value)
// 创建了一个 myChart 对象
如果是绘制的地图，需要先引入和注册地图：
echarts.registerMap('xa' xianJSON)
4、指定配置项和数据
var option = {
// 存放需要绘制图片类型，以及样式设置
}
5、给 echarts 对象设置配置项
myChart.setOption(option)三、具体实现步骤
步骤1：绘制基本地图层，显示各个区域。
具体代码为：
<template>
<div>
<div ref="xian"
style="width: 100%;height: 800px;border: solid 1px red;background: #011868;"
></div>
</div>
</template>
<script lang="ts" setup>
import { ref onMounted } from 'vue'
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
onMounted(() => {
drwaMap()
})
function drwaMap() {
var myChart = echarts.init(xian.value)
echarts.registerMap('xa' xianJSON)
var option = {
geo: {
map: 'xa'
zoom: 1
roam: true
center: [109.00853 34.11078]
label: {
show: true
color: 'rgba(255 255 255 0.2)'
}
itemStyle: {
normal: {
areaColor: '#080b1a'
borderColor: 'rgba(0 116 255 0.2)'
borderWidth: 2
borderType: 'dashed'
}
emphasis: {
areaColor: '#4f6ee9'
color: 'rgba(255 255 255 0.8)'
}
}
}
}
myChart.setOption(option)
}
</script>
步骤2：底层绘制一个地图层，设置地图外层边框
添加 series 属性，再绘制一个地图层，利用 z 放到最底层。
series: [
//绘制一个新地图
{
type: 'map'
map: 'xa'
zoom: 1
roam: true
center: [109.00853 34.11078]
z: -1 // 置于底层
itemStyle: {
normal: {
areaColor: '#2e488f'
borderColor: '#0074ff'
borderWidth: 5 //设置外层边框线粗细
}
}
}
]
步骤3：添加分布的数据点标记
给 series 中再添加一个配置项：
{
type: 'effectScatter' // 特效散点图
coordinateSystem: 'geo'
symbol: 'circle'
// symbolSize 设置标记点的大小，
//把大小限制再 30 - 50 之间
symbolSize: function (val) {
return 30 (val[2] / 100) * 20
}
colorBy: 'series'
//显示name并设置样式
label: {
show: true
formatter: function (data) {
return data.value[2]
}
color: '#080b1a'
fontSize: '16'
offset: [0 0]
align: 'center'
}
//涟漪效果设置
rippleEffect: {
color: '#32479d'
number: 3
period: 4
scale: 2
brushType: 'stroke'
}
itemStyle: {
normal: {
color: '#00e6ff'
borderColor: '#32479d'
borderWidth: 2
}
}
data: [
{ name: '蓝田' value: [109.423479 34.181634 50] }
{ name: '长安区' value: [108.923479 34.110134 30] }
{ name: '周至县' value: [108.123479 34.010134 2] }
{ name: '鄠邑区' value: [108.573479 34.100134 4] }
{ name: '临潼区' value: [109.283479 34.510134 3] }
{ name: '高陵区' value: [109.059479 34.550134 1] }
]
}
步骤4：处理放大缩小时不同步的问题。
捕捉 georoam 事件，上层的 geo 缩放、偏移的时候，让下层的 map 跟着上层同步进行。添加代码：
myChart.on('georoam' function (params) {
var option = myChart.getOption() //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.series[0].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option) //设置option
})四、完整源码
<template>
<div>
<div
ref="xian"
style="
width: 100%;
height: 800px;
border: solid 1px red;
background: #0c0b2a;
"
></div>
</div>
</template>
<script lang="ts" setup>
import { ref onMounted } from 'vue'
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
onMounted(() => {
drwaMap()
})
function drwaMap() {
var myChart = echarts.init(xian.value)
echarts.registerMap('xa' xianJSON)
var option = {
geo: {
map: 'xa'
zoom: 1
roam: true
center: [109.00853 34.11078]
label: {
show: true
color: 'rgba(255 255 255 0.2)'
}
itemStyle: {
normal: {
areaColor: '#080b1a'
borderColor: 'rgba(0 116 255 0.2)'
borderWidth: 2
borderType: 'dashed'
}
emphasis: {
areaColor: '#4f6ee9'
color: 'rgba(255 255 255 0.8)'
}
}
}
series: [
//绘制一个新地图
{
type: 'map'
map: 'xa'
zoom: 1
roam: true
center: [109.00853 34.11078]
z: -1
itemStyle: {
normal: {
areaColor: '#2e488f'
borderColor: '#0074ff'
borderWidth: 5
}
}
}
{
type: 'effectScatter' // 特效散点图
coordinateSystem: 'geo'
symbol: 'circle'
symbolSize: function (val) {
return 30 (val[2] / 100) * 20
}
colorBy: 'series'
//显示name并设置样式
label: {
show: true
formatter: function (data) {
return data.value[2]
}
color: '#080b1a'
fontSize: '16'
offset: [0 0]
align: 'center'
}
//涟漪效果设置
rippleEffect: {
color: '#32479d'
number: 3
period: 4
scale: 2
brushType: 'stroke'
}
itemStyle: {
normal: {
color: '#00e6ff'
borderColor: '#32479d'
borderWidth: 2
}
}
data: [
{ name: '蓝田' value: [109.423479 34.181634 50] }
{ name: '长安区' value: [108.923479 34.110134 30] }
{ name: '周至县' value: [108.123479 34.010134 2] }
{ name: '鄠邑区' value: [108.573479 34.100134 4] }
{ name: '临潼区' value: [109.283479 34.510134 3] }
{ name: '高陵区' value: [109.059479 34.550134 1] }
]
}
]
}
myChart.setOption(option)
// 同步缩放、偏移
myChart.on('georoam' function (params) {
var option = myChart.getOption() //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.series[0].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option) //设置option
})
}
</script>
