uniapp上echarts地图钻取

news2024/9/27 23:31:42

1: 预期效果

通过切换地图 , 实现地图的钻取效果
image.pngimage.pngimage.png

2: 实现原理以及核心方法/参数

一开始是想利用更换地图数据的形式进行地图钻取 , 这就意味着我们需要准备全国30多个省份的地图数据 , 由于一开始考虑需要适配小程序端 , 如此多的地图文件增加了程序的体积 , 如果使用接口调用 , 会影响响应速度 ; 所以最后想到了使用一张地图数据 , 通过地图中心点定位 + 缩放 + 主动触发高亮

方法解读: **
监听到地图点击事件/地图切换事件 ,
通过center属性定位当前省份 , 通过zoom属性指定放大层级(让当前省份占据页面) ,
接下来需要将其他的省份隐藏掉 , 这里通过itemStyle样式设置 , 将地图的透明度调整为0 ,
这时候发现我们选择的当前省份也隐藏掉了 , 这时候就要借助另一个属性 emphasis ,
在emphasis 中可以将当前选中的地图区块重新定义样式 ;
如果我们是通过地图点击触发的钻取 , 当前省份区块是可以被选中的 , 但是如果是select选择器 , 需要调用echarts的dispatchAction**接口进行主动触发

_this.$refs['canvas'].$curChart.dispatchAction({
    type: 'highlight',
    name: _this.cityList[e.target.value]['name']
})

参数如下:

geo: {
		map: "china", // 映射的地图name
		// roam: 'scale', // scale缩放/ move拖动 / true 缩放+拖动
		center: '', // 中心点位置坐标
		scaleLimit: {
			min: 1,
			max: 10
		}, // 缩放比例限制
		zoom: 1.2, // 当前缩放比例
		top: 50,
		label: { // 地图文本样式
			show: true,
			fontSize: "8",
			color: "rgba(0,0,0,0.7)"
		},
		itemStyle: { // 地图区块样式
			borderColor: "rgba(0, 0, 0, 0.2)",
			opacity: 1
		},
		emphasis: { // 当前选中地图区块样式
			itemStyle: {
				opacity: 1,
				areaColor: "#f2d5ad",
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				borderWidth: 2
			}
		},
		selectedMode: false , // 多选开关
		silent: false // 是否静默状态
	},

3: 代码

demo.vue

<template>
	<view>
		<view style="height:34px;"></view>
		<!-- <uchartsDemo1></uchartsDemo1> -->
		<view class="uni-title uni-common-pl">地区选择器</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="cityList" :range-key="'name'">
						<view class="uni-input">{{cityList[index]['name']}}</view>
					</picker>
				</view>
			</view>
		</view>
		<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec"></uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
	import cityMap from './cityMap.js'
	import chartsOption from './chartsOption.js'
	let pageInstance = {}
	export default {
		data() {
			return {
				index: 0,
				cityList: [{name:'全国'},...cityMap.cityPointList],
				ec: {
					lazyLoad: true,
					option: chartsOption.mapOption
				}
			}
		},
		mounted() {
			this.$refs['canvas'].init()
		},
		components: {
			uniEcCanvas
		},
		methods:{
			// 城市切换
			bindPickerChange (e) {
				const _this = this
				// 根据name获取当前城市数据 , 并修改option
				// 获取城市坐标
				let point = cityMap.cityPointMap.get(_this.cityList[e.target.value]['name']) || []
				let data = cityMap.cityDataMap.get(_this.cityList[e.target.value]['name']) || {}
				// 组装option
				let mapOption = JSON.parse(JSON.stringify(chartsOption.mapOption))
				mapOption.geo.center = point
				mapOption.geo.zoom = 6
				mapOption.geo.silent = true
				mapOption.geo.label.show = false
				mapOption.geo.itemStyle.opacity = 0
				mapOption.series[0].data = [data]
				_this.ec.option = mapOption
				setTimeout(function(){
					_this.$refs['canvas'].$curChart.dispatchAction({
						type: 'highlight',
						name: _this.cityList[e.target.value]['name']
					})
				},10)
			},
			BindEvent (e) {
			}
		}
	}
</script>
<style scoped>
	.uni-ec-canvas {
		width: 750upx;
		height: 750upx;
		display: block;
	}
</style>

cityMap.js – 存放所有省份的中心点 , 数据 , 自定义的配置

let cityMap = {}

cityMap.cityPointList = [
	{
		"cp": [121.0254, 23.5986],
		"name": "台湾",
		"childNum": 6
	},
	{
		"cp": [115.4004, 37.9688],
		"name": "河北",
		"childNum": 3
	},
	{
		"cp": [112.4121, 37.6611],
		"name": "山西",
		"childNum": 1
	},
	{
		"cp": [117.5977, 44.3408],
		"name": "内蒙古",
		"childNum": 2
	},
	{
		"cp": [122.3438, 41.0889],
		"name": "辽宁",
		"childNum": 16
	},
	{
		"cp": [126.4746, 43.5938],
		"name": "吉林",
		"childNum": 1
	},
	{
		"cp": [128.1445, 48.5156],
		"name": "黑龙江",
		"childNum": 2
	},
	{
		"cp": [120.0586, 32.915],
		"name": "江苏",
		"childNum": 1
	},
	{
		"cp": [120.498, 29.0918],
		"name": "浙江",
		"childNum": 45
	},
	{
		"cp": [117.2461, 32.0361],
		"name": "安徽",
		"childNum": 3
	},
	{
		"cp": [118.3008, 25.9277],
		"name": "福建",
		"childNum": 18
	},
	{
		"cp": [116.0156, 27.29],
		"name": "江西",
		"childNum": 1
	},
	{
		"cp": [118.7402, 36.4307],
		"name": "山东",
		"childNum": 13
	},
	{
		"cp": [113.4668, 33.8818],
		"name": "河南",
		"childNum": 1
	},
	{
		"cp": [112.2363, 31.1572],
		"name": "湖北",
		"childNum": 3
	},
	{
		"cp": [111.5332, 27.3779],
		"name": "湖南",
		"childNum": 3
	},
	{
		"cp": [113.4668, 22.8076],
		"name": "广东",
		"childNum": 24
	},
	{
		"cp": [108.2813, 23.6426],
		"name": "广西",
		"childNum": 2
	},
	{
		"cp": [109.9512, 19.2041],
		"name": "海南",
		"childNum": 1
	},
	{
		"cp": [102.9199, 30.1904],
		"name": "四川",
		"childNum": 2
	},
	{
		"cp": [106.6113, 26.9385],
		"name": "贵州",
		"childNum": 3
	},
	{
		"cp": [101.8652, 25.1807],
		"name": "云南",
		"childNum": 1
	},
	{
		"cp": [88.7695, 31.6846],
		"name": "西藏",
		"childNum": 1
	},
	{
		"cp": [109.5996, 35.6396],
		"name": "陕西",
		"childNum": 1
	},
	{
		"cp": [95.7129, 40.166],
		"name": "甘肃",
		"childNum": 2
	},
	{
		"cp": [96.2402, 35.4199],
		"name": "青海",
		"childNum": 2
	},
	{
		"cp": [105.9961, 37.3096],
		"name": "宁夏",
		"childNum": 2
	},
	{
		"cp": [84.9023, 41.748],
		"name": "新疆",
		"childNum": 1
	},
	{
		"cp": [116.4551, 40.2539],
		"name": "北京",
		"childNum": 1
	},
	{
		"cp": [117.4219, 39.4189],
		"name": "天津",
		"childNum": 1
	},
	{
		"cp": [121.4648, 31.2891],
		"name": "上海",
		"childNum": 6
	},
	{
		"cp": [107.7539, 30.1904],
		"name": "重庆",
		"childNum": 2
	},
	{
		"cp": [115.5784, 22.1057],
		"name": "香港",
		"childNum": 5
	},
	{
		"cp": [113.5715, 21.1983],
		"name": "澳门",
		"childNum": 1
	}
	
	
]
cityMap.cityDataList = [{
				name: "南海诸岛",
				value: 0
			},
			{
				name: '北京',
				value: 54
			},
			{
				name: '天津',
				value: 13
			},
			{
				name: '上海',
				value: 40
			},
			{
				name: '重庆',
				value: 75
			},
			{
				name: '河北',
				value: 13
			},
			{
				name: '河南',
				value: 83
			},
			{
				name: '云南',
				value: 11
			},
			{
				name: '辽宁',
				value: 19
			},
			{
				name: '黑龙江',
				value: 15
			},
			{
				name: '湖南',
				value: 69
			},
			{
				name: '安徽',
				value: 60
			},
			{
				name: '山东',
				value: 39
			},
			{
				name: '新疆',
				value: 4
			},
			{
				name: '江苏',
				value: 31
			},
			{
				name: '浙江',
				value: 104
			},
			{
				name: '江西',
				value: 36
			},
			{
				name: '湖北',
				value: 1052
			},
			{
				name: '广西',
				value: 33
			},
			{
				name: '甘肃',
				value: 7
			},
			{
				name: '山西',
				value: 9
			},
			{
				name: '内蒙古',
				value: 7
			},
			{
				name: '陕西',
				value: 22
			},
			{
				name: '吉林',
				value: 4
			},
			{
				name: '福建',
				value: 18
			},
			{
				name: '贵州',
				value: 5
			},
			{
				name: '广东',
				value: 98
			},
			{
				name: '青海',
				value: 1
			},
			{
				name: '西藏',
				value: 0
			},
			{
				name: '四川',
				value: 44
			},
			{
				name: '宁夏',
				value: 4
			},
			{
				name: '海南',
				value: 22
			},
			{
				name: '台湾',
				value: 3
			},
			{
				name: '香港',
				value: 5
			},
			{
				name: '澳门',
				value: 5
			}
		]
cityMap.cityPointMap = new Map()
cityMap.cityDataMap = new Map()
cityMap.cityPointList.forEach(e=>{
	let {name,cp} = e
	cityMap.cityPointMap.set(name,cp)
})
cityMap.cityDataList.forEach(e=>{
	cityMap.cityDataMap.set(e.name,e)
})

export default cityMap

chartsOption.js – 存在地图option配置

let chartsOption = {}

// 地图
chartsOption.mapOption = {
	visualMap: {
		min: 0,
		max: 1000,
		right: 10,
		bottom: 40,
		showLabel: !0,
		text: ["高", "低"],
		pieces: [{
			gt: 100,
			label: "> 100",
			color: "#7f1100"
		}, {
			gte: 10,
			lte: 100,
			label: "100",
			color: "#ff5428"
		}, {
			gte: 1,
			lt: 10,
			label: "10",
			color: "#ff8c71"
		}, {
			gt: 0,
			lt: 1,
			label: "1",
			color: "#ffd768"
		}, {
			value: 0,
			color: "#ffffff"
		}],
		show: !0
	},
	geo: {
		map: "china",
		// roam: 'scale', // scale缩放/ move拖动
		center: '', // 中心点位置
		scaleLimit: {
			min: 1,
			max: 10
		}, // 缩放限制
		zoom: 1.2, // 缩放比例
		top: 50,
		label: {
			show: true,
			fontSize: "8",
			color: "rgba(0,0,0,0.7)"
		},
		itemStyle: {
			borderColor: "rgba(0, 0, 0, 0.2)",
			opacity: 1
		},
		emphasis: {
			itemStyle: {
				opacity: 1,
				areaColor: "#f2d5ad",
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				borderWidth: 2
			}
		},
		selectedMode: false ,
		silent: false
	},
	series: [{
		name: "汽车销量",
		type: "map",
		geoIndex: 0,
		data: [{
				name: "南海诸岛",
				value: 0
			},
			{
				name: '北京',
				value: 54
			},
			{
				name: '天津',
				value: 13
			},
			{
				name: '上海',
				value: 40
			},
			{
				name: '重庆',
				value: 75
			},
			{
				name: '河北',
				value: 13
			},
			{
				name: '河南',
				value: 83
			},
			{
				name: '云南',
				value: 11
			},
			{
				name: '辽宁',
				value: 19
			},
			{
				name: '黑龙江',
				value: 15
			},
			{
				name: '湖南',
				value: 69
			},
			{
				name: '安徽',
				value: 60
			},
			{
				name: '山东',
				value: 39
			},
			{
				name: '新疆',
				value: 4
			},
			{
				name: '江苏',
				value: 31
			},
			{
				name: '浙江',
				value: 104
			},
			{
				name: '江西',
				value: 36
			},
			{
				name: '湖北',
				value: 1052
			},
			{
				name: '广西',
				value: 33
			},
			{
				name: '甘肃',
				value: 7
			},
			{
				name: '山西',
				value: 9
			},
			{
				name: '内蒙古',
				value: 7
			},
			{
				name: '陕西',
				value: 22
			},
			{
				name: '吉林',
				value: 4
			},
			{
				name: '福建',
				value: 18
			},
			{
				name: '贵州',
				value: 5
			},
			{
				name: '广东',
				value: 98
			},
			{
				name: '青海',
				value: 1
			},
			{
				name: '西藏',
				value: 0
			},
			{
				name: '四川',
				value: 44
			},
			{
				name: '宁夏',
				value: 4
			},
			{
				name: '海南',
				value: 22
			},
			{
				name: '台湾',
				value: 3
			},
			{
				name: '香港',
				value: 5
			},
			{
				name: '澳门',
				value: 5
			}
		]
	}]
}

export default chartsOption

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1078469.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

element el-table表格表头某一列表头字段修改颜色

element el-table表格表头某一列表头字段修改颜色

需求&#xff1a; 1 使用 :header-cell-class-name"addClass" 属性 2 根据显示条件 在redText&#xff0c;whiteText 中设置你想要添加的必填表头index 3.根据条件修改文字样式 完整代码 <el-table ref"tableRef" :cell-style"{ color: #FFF,…
阅读更多...
拥抱产业发展机遇 兑现5G商业价值

拥抱产业发展机遇 兑现5G商业价值

[阿联酋&#xff0c;迪拜&#xff0c;2023年10月10日] 今天&#xff0c;以“将5G-A带入现实”为主题的2023全球移动宽带论坛在迪拜举行。本次大会上&#xff0c;华为轮值董事长胡厚崑与GSMA总干事Mats Granryd围绕“5G产业进程与发展”连线对话。胡厚崑指出&#xff0c;“技术发…
阅读更多...
redis 哨兵 sentinel

redis 哨兵 sentinel

sentinel巡查监控后台master主机是否故障&#xff0c;如果故障根据投票数自动将某一个从库转换为新主库&#xff0c;继续对外服务 sentinel 哨兵的功能 监控 监控主从redis库运行是否正常消息通知 哨兵可以将故障转移的结果发送给客户端故障转移 如果master异常&#xff0c;则…
阅读更多...
openEuler 系统搭建高可用 Kubernetes 集群

openEuler 系统搭建高可用 Kubernetes 集群

k8s 高可用集群部署 在生产环境中&#xff0c;k8s 高可用集群部署能够确保应用程序稳态运行不出现服务中断情况。 此处我们基于 openEuler 系统环境&#xff0c;配置 Keepalived 和 HAproxy 使负载均衡&#xff08;LB/Load Balancer&#xff09;、实现高可用。 步骤如下&…
阅读更多...
NZ系列工具NZ04:VBA网络连接测试

NZ系列工具NZ04:VBA网络连接测试

我的教程一共九套及VBA汉英手册一部&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到数据库&#xff0c;到字典&#xff0c;到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑&#xff0c;这么多知识点该如何组织…
阅读更多...
UOS通过GPG对文件签名验签

UOS通过GPG对文件签名验签

本人用的版本&#xff1a;gpg (GnuPG) 2.2.12 生成密钥 生成公钥/私钥对 gpg --full-generate-key设置密钥的长度 默认回车3072&#xff0c;越长越安全。 设定密钥的有效期限 默认回车“0” 构建用户标识 输入姓名、邮件、注释后&#xff0c;输入“o”确认 在弹出框内…
阅读更多...
班级文化建设方案分享 中学高中建设方案

班级文化建设方案分享 中学高中建设方案

班级文化建设方案 一、基本信息 名称&#xff1a;xxxx计划 时间&#xff1a;XXXX年XX月-XXXX年XX月 地点&#xff1a;[XXXXX] 参与人群&#xff1a;X班全体师生及家长 目的和宗旨&#xff1a;通过班级文化建设&#xff0c;营造积极向上的班级氛围&#xff0c;增强班级凝聚…
阅读更多...
分布式数据库HBase（林子雨慕课课程）

分布式数据库HBase（林子雨慕课课程）

文章目录 4. 分布式数据库HBase4.1 HBase简介4.2 HBase数据模型4.3 HBase的实现原理4.4 HBase运行机制4.5 HBase的应用方案4.6 HBase安装和编程实战 4. 分布式数据库HBase 4.1 HBase简介 HBase是BigTable的开源实现 对于网页搜索主要分为两个阶段 1.建立整个网页索引&#xf…
阅读更多...
Zabbix 简介与部署

Zabbix 简介与部署

一、zabbix 简介 1、概念&#xff1a; Zabbix 是一个开源的网络监控系统&#xff0c;用于监视和管理计算机系统、网络和应用程序的性能和可用性。它提供了广泛的监控、警报、数据收集和可视化功能&#xff0c;能够有效地监测和管理大规模的IT基础设施。 2、监控对象&#xf…
阅读更多...
github创建个人网页登录后404无法显示的问题

github创建个人网页登录后404无法显示的问题

1.首先必须要有内容&#xff0c;默认是会找index.html文件&#xff0c;找不到该文件会找readme.md文件&#xff0c;也就是说最简单的方法是&#xff0c;创建了与用户名同名的repository后username.github.io后&#xff0c;添加一个readme.md文件&#xff0c;得在readme里打点字…
阅读更多...
智哪儿线下活动来啦 ~这次我想和你聊聊「AI营销」的生意经

智哪儿线下活动来啦 ~这次我想和你聊聊「AI营销」的生意经

大家好&#xff0c;我们又要见面了。 近年来&#xff0c;ChatGPT等不断涌现的新技术深深改变着我们的生活。而在家居行业&#xff0c;「智哪儿」观察到&#xff0c;一方面&#xff0c;行业现有营销方案获客成本太高、效率比较低&#xff0c;家居建材企业数智化转型趋势越来越明…
阅读更多...
短视频剪辑：如何批量调整播放倍速，轻松掌控节奏？

短视频剪辑：如何批量调整播放倍速，轻松掌控节奏？

在短视频剪辑中&#xff0c;调整播放倍速是一项常见的操作。通过对视频播放速度的掌控&#xff0c;我们可以让视频节奏更加丰富&#xff0c;提升观众的观看体验。本文将介绍如何批量调整短视频的播放倍速&#xff0c;帮助你轻松掌控节奏。 首先&#xff0c;我们需要了解节奏和倍…
阅读更多...
智慧城市智慧灯杆IP网络广播可视紧急求助系统

智慧城市智慧灯杆IP网络广播可视紧急求助系统

智慧城市智慧灯杆IP网络广播可视紧急求助系统 深圳锐科达智慧城市智慧灯杆IP网络广播紧急求助系统 引言&#xff1a; 智慧路灯隶属于智慧城市&#xff0c;是智慧城市系统下的一个分支&#xff0c;也是其中一个重要组成部分。智慧城市系统平台功能强大&#xff0c;架构复杂&am…
阅读更多...
React和vue等前端html页面引入自定义字体文件，更改页面字体样式

React和vue等前端html页面引入自定义字体文件，更改页面字体样式

font-family中列出的是几乎适用于所有计算机的网络安全字体&#xff0c;如&#xff1a;Arial/Helvetica/Georgia/Times New Roman等。但是如果想要一些特别的字体&#xff0c;可以从外部网站中找到并下载&#xff0c;然后在代码中引入。网页自带的字体没有很多&#xff0c;有时…
阅读更多...
2023年中国钢木装甲门产量、销量及市场规模分析[图]

2023年中国钢木装甲门产量、销量及市场规模分析[图]

钢木装甲门是一种结合了钢质和木材的复合材料门&#xff0c;其结构由钢质外壳和内部木质框架组成。钢木装甲门通常具有钢质外壳的坚固性和安全性&#xff0c;以及内部木质框架的美观和装饰性。 钢木装甲门行业分类 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#x…
阅读更多...
【Java 进阶篇】CSS 属性

【Java 进阶篇】CSS 属性

当你学习CSS时&#xff0c;了解CSS属性是非常重要的&#xff0c;因为这些属性控制了网页上元素的外观和布局。本文将详细介绍一些常见的CSS属性&#xff0c;包括文本属性、盒子模型属性、背景和边框属性、定位属性等。我们还将为每个属性提供示例代码&#xff0c;以便你更好地理…
阅读更多...
MP逻辑删除

MP逻辑删除

一、什么是逻辑删除 MybatisPlus中逻辑删除通俗说为了在数据库中保留数据&#xff0c;但是又不想进行其他一些sql语句时有他&#xff08;刚刚通过逻辑删除了的&#xff09;的存在。就是在数据库中添加一字段&#xff0c;通过数值内容来说明那些是指删除了的即可 二、逻辑删除…
阅读更多...
智能筛选超时物流订单的技巧详细揭秘

智能筛选超时物流订单的技巧详细揭秘

现如今&#xff0c;电子商务的快速发展使得快递成为了我们日常生活中不可或缺的一部分。然而&#xff0c;随着快递量的增加&#xff0c;快递查询的问题也开始变得棘手起来。有时候&#xff0c;我们会遇到快递超时的情况&#xff0c;而这时候我们需要一种快捷的方式来查询快递的…
阅读更多...
今年的秋招面试，确实有点难。

今年的秋招面试，确实有点难。

不可否认的是&#xff0c;今年秋招确实有点难 从今年的形势来看&#xff0c;好的 offer 都掌握在少数人的手里&#xff0c;想要秋招找到理想的工作&#xff0c;要么学历好&#xff0c;要么技术功底很扎实&#xff0c;这两样都不占的话&#xff0c;就业压力就会比较大。 如何从…
阅读更多...
电机保护器究竟该怎么选择

电机保护器究竟该怎么选择

随着我国重工业以及电气和各行各业的发展&#xff0c;电动机保护器似乎成为行业精英口中最常讨论的话题&#xff01;施耐德EOCR自然也是充当着不可磨灭的地位&#xff01;成为电机保护器品牌中选择率最高的产品&#xff01; 在谈到有关电动机保护器的问题时,先给大家说一下什么…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023