正文

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

空城机  空城机  2022-10-23  116

关键词：

序

看过一些可视化大屏展示地图的例子，准备动手做做。

既然要开始比制作，那么先把目标定好，做一个展示中国城市的下钻地图

使用：

Vue3
Vite
Typescript
echarts

实现效果：

准备工作

创建项目

因为准备使用Vue3 + Vite + Typescript

所以使用yarn create vite echarts-component --template vue-ts命令创建出项目

在项目的配置时，需要安装一些库，axios、echarts、less、less-loader、vue-router。使用yarn将这些库分别安装完成

我准备在全局中使用axios和echarts，在main.ts中将这两个挂载到Vue上面

const app = createApp(App);
app.config.globalProperties.$echarts = echarts;
app.config.globalProperties.$axios = axios;
app.use(router)
app.mount('#app');

数据来源

在echarts中创建地图，首先需要地图的JSON数据

这可以从DataV.GeoAtlas地理小工具系列 (aliyun.com) 进行获取，我不准备将这些JSON数据下载到本地，所以依旧使用JSON API进行访问

创建一个.vue文件，在内部通过getCurrentInstance获取到之前全局配置的$echarts和$axios

import  ref, reactive, onMounted, getCurrentInstance, watch, Ref  from "vue";

// 获取全局配置项
const  proxy  = getCurrentInstance() as any;
const  $echarts, $axios  = proxy;

通过$axios.get()去访问一下之前得到的中国省份JSON 的URL：'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'

获得全国各省份接口数据：

关于接口的Typescript类型，可以使用Quicktype进行获取得到类型文件

命令： quicktype https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json -o geodatav.ts

获取到的数据需要通过echarts的registerMap进行地图的注册

// 地图名称，地图数据
$echarts.registerMap(currentName, mapdata);

echarts的options配置

在option配置中，在series中需要将类型type设置为map，并且map属性的地图名称为之前注册的地图名称。并且如果地图上不需要显示过多的数据或者tooltip提示，data数据不填入也一样可以

const echartsMap1 = ref(null);  // 获取DOM节点
let myChart = $echarts.init(echartsMap1.value);
let option = 
	title: 
		text: `$currentName地图`,
		left: 'center',
		top: '2%',
		textStyle: 
			color: '#fff'
		
	,
	backgroundColor: '#070d18',
	series: [
		name: `$currentName地图`,
		//使用上面注册的地图
		map: currentName,
		//初始化类型写地图
		type: "map",
		roam: true,//鼠标滚轮缩放
		selectedMode: false, // 点击选中区域
		// 区块文字样式
		label: 
			normal: 
				formatter: 'b',
				show: true,
				textStyle:
					color:'#fff'
				
			,
			emphasis: 
				show: true,
				textStyle: 
					color: '#05C3F9'
				
			
		, 
		// 区块样式
		itemStyle: 
			normal: 
				areaColor: '#0C356C',
				borderColor: '#3B5077',
				borderWidth: 1
			,
			emphasis: 
				areaColor: '#0C356C',
				shadowColor: '#1773c3',
				shadowBlur: 20
			
		,
		select:  // 地图选中区域样式 
		,
		data: [
		],
	]

myChart.setOption(option);

这样一来，界面上就能展示中国地图了

下钻实现

现在已经实现了最开始的中国地图，那么如何实现点击省份进入下一级，点击市进入下一级呢，需要将其扩展一下

在之前的获取的中国地图省份数据中，可以在properties中得到具体一些数据：

属性	含义
adcode	该省份或城市的id，可以用于`JSON API`获取
name	地区的名称
center	应该是省份中心城市位置
childrenNum	代表下面有多少地区，如果为0，则不进行下钻
parent.adcode	上一级父区域的id

通过这些属性，就可以去实现下钻的方法了

创建一个allMap集合，用来存放当前已出现过的地图

// 定义当前所有的地区信息
let allMap: Map<string | number, citymodel> = new Map();
// 第一份信息就是中国
allMap.set(100000, 
	name: '中国',
	adcode: 100000, 
	url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
	childrenNum: 34,
	center: [0, 0],
	hasRegister: false,  // 是否已经注册在echarts
)

在绘制中国的echarts地图时，将获取到的数据存入allMap中，并且将中国信息中是否注册变为true，这样之后再渲染时就不需要registerMap重新注册了

// 判断是否注册过
if (!cMap?.hasRegister) 
	$echarts.registerMap(currentName, mapdata);
	// 当前地图下的地区信息
	let currentCityMap: Map<string | number, citymodel> = getCurrentadcode(mapdata);
	
	allMap = new Map([...allMap, ...currentCityMap]);
	(allMap.get(cMap?.adcode as string | number) as citymodel).hasRegister = true;

在echarts可以通过绑定click点击方法，点击地区可以获得name名称属性，然后通过名称，去获取该地区的adcode

// 地图点击事件
myChart.on('click', (params:any)=>
	let n = getMapKey(params.name, allMap);
	if (allMap.get(n)?.childrenNum == 0) return ;
	(currentadcode.value as number | string) = n;           
)
// 根据map中数值，获取key
const getMapKey = (value: string, map: Map<string | number, citymodel>): number | string  => 
	let arriterator = map.values(), res: number | string = 0;
	for (const iterator of arriterator) 
		if (iterator.name == value) 
			res = iterator.adcode;
			break ;
		
	
	
	return res;

编写一个watch监听方法，监听当前地图的currentadcode改变，然后通过判断是否存在childrenNum，来决定是否绘制地图。

let currentadcode: Ref<number | string> = ref(100000);
// 当前地图
let currentMap: Ref<null | citymodel> = ref(null); 
// 监听currentadcode地图值
watch(currentadcode, (newval, oldval)=>
    // 根据adcode，从allMap中获取该地图信息
	let nextMap = allMap.get(newval) as citymodel 
	
	// 如果存在子节点
	if (nextMap?.childrenNum && nextMap.childrenNum > 0) 
		currentMap.value = nextMap;
		
		// 如果出现意外，没呀父节点
		if (currentMap.value.parentadcode == undefined) 
			currentMap.value.parentadcode = oldval;
		
		// 获取地图json, 绘制地图
		renderChart(nextMap);
	
)

在上面步骤做完后，已经能做到逐层下点，但是并没有返回，所以需要添加返回方法。

因为之前已经写了watch监听方法，所以返回上一级地图，只需要改变currentadcode即可。在地图信息中，存在着parentadcode父地图的adcode
返回元素：

<div class="backParent" v-show="currentadcode != 100000" @click="returnLastMap(currentMap?.parentadcode as string | number)">返回</div>

返回方法returnLastMap：

// 返回上级地图
const returnLastMap = (adcode: string | number) =>        
	currentadcode.value = adcode

到此为止，一份中国地图的下钻就使用echarts完成啦

不习惯的vue3起步六のecharts绘制下钻地图(代码片段)

序看过一些可视化大屏展示地图的例子，准备动手做做。既然要开始比制作，那么先把目标定好，做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite... 查看详情

关于echarts地图下钻。

...，关于地图下钻。这里做了个简单的青岛地图下钻，初学echarts，做的不精，凑合看看吧。　　　第一步呢，先引入echarts等文件，这是最基本的。　　　　　　第二步，到官网下载青岛各区的json包，网址 http://ecomfe.github.... 查看详情

vue3高德地图的下钻方法

参考技术A1.刚进入时为全国的地图,鼠标划入时,有tooltip显示某个省份的名称,并且会有填充色,移除即消失2.点击某个省份时,会下钻到下级行政区域,并且有画线3.点击返回全国时,地图返回全国查看详情

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

序Vue3虽然说是Vue2的升级版，但里面不一样的地方还是挺多的，并且相比Vue2能更好的使用typescript了先从网上找视频学习：https://www.bilibili.com/video/BV1gf4y1W783目录：Vue+TS技术历史变革Vite还是WebpackTypescript你还不熟&... 查看详情

不习惯的vue3起步の一：＜scriptsetup＞(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

使用请求Hooks完善业务在前端开发过程中，对于Api接口通常会进行封装，这里vue3中因为添加了typescript，所以也再来写写。本次接口使用的是网上找的公开api：https://tenapi.cn/zhihuresou/，请求出来的数据是知乎热... 查看详情

不习惯的vue3起步五のapihooks封装(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

计算属性和侦听器Computed计算属性在模板内表达式非常简单，如果在模板内放入过多的逻辑会使得模板过重并且难以维护。示例：<template><div>admin.friends.filter((item)=>if(item.name=='李四')returntrueelseretu... 查看详情

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步四の生命周期&provide/inject(代码片段)

生命周期Vue3的生命周期大部分还是和Vue2一样，除了beforeCreate和created，这两个已经替换成setup了。在Vue3中，需要哪个生命周期钩子也可以用哪个，使用时需要用import从Vue中进行导入。选项APIHook(setup)作用beforeCreate... 查看详情

vue+echarts4.x地图下钻/散点分布以及热力图

参考技术A因为工作原因用到echarts，需要实现三个功能国家到省级的地图下钻和散点分布以及热力图显示网上资料蛮少的，记录一个给后面的小伙伴一些参考，如果帮到你请点赞d=====(￣▽￣*)b中国地图下显示为热力图，显示精确... 查看详情

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

序在之前的学习中，对vue3和vite做了一下简单的了解。也知道了vue3，相较于vue2，对typescript的支持更加好了。所以直接从ts+vue3一起来吧。（之前我对typescript基础也有过学习，忘记也可以翻看资料《typescript... 查看详情

不习惯的vue3起步二のalias别名ref和reactive(代码片段)

不习惯的vue3起步三のcomputed和watch(代码片段)

不习惯的vue3起步五のapihooks封装(代码片段)

echart实现中国地图，并且实现省市级下钻(代码片段)

本项目需要用到的时echarts，接下来展示文件目录接下来展示各个文件的内容base文件内容：packagethree;publicclassbaseStringvalue;Stringname;publicStringgetValue()returnvalue;publicvoidsetValue(Stringvalue)this.value=value;publicStringgetName()ret... 查看详情

vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)

...实现过程：1、下载json:地址： https://hxkj.vip/demo/echartsMap/或者：EasyMap 下载的有的并非是严格的json文件，选用用 json.cn 进行转换2、vue文件中引入json࿰ 查看详情