用好 Echart5 绘制地图,让可视化大屏描边酷炫

开发 前端
绘制地图之前,我们先需要明白实现原理是啥样的,然后按照具体的实现步骤,依次实现效果。如果不明白原理,每次完成的都是复制粘贴。

可视化我们已不再陌生,地图也很常用。有很多公司业务范围可能仅限于某个市区,所以画一个 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>
责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-30 12:02:52

Python可视化代码

2022-08-17 09:01:16

数据可视化大数据

2022-09-29 11:16:21

Python数据可视化

2020-07-06 14:50:36

地图可视化Java

2020-03-11 14:39:26

数据可视化地图可视化地理信息

2023-02-07 11:44:02

2023-12-27 10:47:45

Flask数据可视化开发

2019-05-20 08:20:40

数据集数据可视化数据

2018-06-16 23:34:09

可视化地图R

2021-09-26 16:20:04

Sentry Dashboards 数据可视化

2014-01-17 10:36:39

2021-03-09 08:32:50

开发视化大屏H5-Dooring

2023-09-26 08:01:16

2019-07-26 09:19:32

数据可视化架构

2021-02-21 23:40:51

Python地图数据

2021-07-12 17:23:47

零设计可视化引擎

2022-02-28 08:34:42

开发可视化大屏

2020-09-18 16:37:59

数据可视化技术Python

2022-03-01 10:29:44

Kubernetes容器

2018-03-21 12:13:47

工具数据开发
点赞
收藏

51CTO技术栈公众号