用好 Echart5 绘制地图，让可视化大屏描边酷炫
2022-04-13 12:20:34来源：今日头条
可视化我们已不再陌生，地图也很常用。有很多公司业务范围可能仅限于某个市区，所以画一个 china 地图意义不大，就只需要绘制某个省份或者市区的地图，然后统计各个区域的一个分布情况，具体的效果如图所示：
一、实现原理：绘制地图之前，我们先需要明白实现原理是啥样的，然后按照具体的实现步骤，依次实现效果。如果不明白原理，每次完成的都是复制粘贴。
1、开始之前，先确认自己的地图需要分几层，及其作用。
2、该效果实现，需要三层地图实现效果。
一层放在最底层，设置地图的边框，对应地图里最外层的蓝色地图线。二层放在中间，实现基本的地图层，显示对应各个区域的名称。三层放在最外层，实现数据标记，对应地图里圆圈和数据。3、拖动或缩放的时候出现错位，使其同步缩放和拖动。
二、Echarts 使用五部曲：1、下载并引入 echartsEcharts 已更新到了 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、准备容器
给元素定义宽高确定的容器用来装地图。
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：绘制基本地图层，显示各个区域。
具体代码为：
<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})四、完整源码<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>
