uniapp上echarts地图钻取

最新推荐文章于 2024-04-17 09:30:15 发布
最新推荐文章于 2024-04-17 09:30:15 发布
阅读量827 收藏
点赞数
文章标签： uni-app echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyun1107892254/article/details/133751883
版权

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
yunsiyu
关注
uniapp整合echarts（目前性能最优、渲染最快方案）
954L
12-20 1507
本文echarts示例如上图，可扫码体验渲染速度及loading效果，下文附带本小程序uniapp相关代码
uniapp引用ECharts实现图表功能
kepler星球的博客
07-29 1753
uniapp引用ECharts实现图表功能
echarts钻取地图
09-06
实现了echarts的map，此以山东省地图为例，可以从市地图钻取到县地图。 其他可以参考： http://download.csdn.net/detail/taozhaocailiu/9547182 如需要获取全国的地图数据，请关注我的资源:geometryCouties（全国数据）
uni-app使用echarts--h5端--可以实现地图下钻
猿来如此的博客
07-02 5493
uniapp开发h5 创建项目 参考uniapp官网 点此直达 引入echarts 需要引入uniapp插件市场的插件echarts-renderjs 仅支持 app-vue、h5 端 要求 uni-app 2.5.5+ 以上版本 APP端要求使用v3编译器 本例使用的echarts版本为4.2.1；经测试，4.7及以下的版本均会导致h5移动端不能与图形交互 如等到renderjs可与业务层方便的通信时，请自行优化 使用 1.项目中引入echarts.min.js 2.创建e..
uni-app 封装echarts地图组件 实现地图二级下钻
qq_45511353的博客
01-25 2044
uni-app 封装echarts地图组件 子组件： 已实现功能：实现地图下钻，跳到省级地图。 <template> <view class="content" style="touch-action:none;"> <button type="default" style="width: 90upx;height: 60upx;font-size: 24upx;padding: 0;margin-left:20upx ;" @click="echarts.showChi
uni-app-echarts+PC+移动端中国地图下钻+标点+统计+放大缩小.rar
10-21
预览地址：https://blog.csdn.net/HandsomeGuy_/article/details/120882604
echarts实现中国-市-县地图三级钻取功能
12-18
echarts实现中国-市-县地图三级钻取功能，功能非常强大，唯一遗憾的是目前只能在IE浏览器下浏览，自己可以完善。支持多浏览器浏览正在修改中。后续发布。
uniapp-Echarts.zip
07-25
【标题】: "uniapp-Echarts.zip" 是一个关于在uni-app中集成Echarts的压缩包，用于在uni-app项目中实现数据可视化功能。 【描述】: 描述中提到的"uni-app如何引入Echarts？"是开发者在使用uni-app进行移动应用开发...
uniapp-echarts.rar
07-02
标题 "uniapp-echarts.rar" 提示我们这个压缩包包含了一个使用uni-app与ECharts集成的项目，特别地，它支持在H5端实现地图的下钻功能。ECharts是一个由百度开发的，基于JavaScript的数据可视化库，而uni-app则是一个...
uniapp 里面echarts的使用
08-30
在uni-app框架中集成ECharts是一项常见的需求，用于创建丰富的数据可视化图表。uni-app是一个多端开发框架，它允许开发者用一套代码同时发布到iOS、Android、H5、小程序等多个平台。ECharts则是一个由百度开发的开源...
echarts全国地图 支持钻取
04-12
该demo基于echarts实现，包含全国地图，支持省市区三级点击钻取
echart地图上钻下钻分级
12-28
具体效果实现可访问https://blog.csdn.net/qq_29099209/article/details/85317542查看，有问题的可以留言
【App端】uni-app使用百度地图api和echarts省市地图下钻
aDiaoYa_的博客
08-28 3268
近期的app项目中想加一个功能，展示全国各地的某一数据统计情况，想来想去，用echarts做地图数据可视化直观且美观。于是就去研究了如何使用，其实在移动端使用echarts地图踩的bug挺多的，总结如下。
列表钻取
weixin_34072637的博客
08-02 100
超链接钻取是一个非常实用的功能，在各种项目、应用中使用广泛，能够帮助数据分析用户清晰、直观地了解不同层级数据的上下级关系，并聚焦于自己感兴趣的内容。当然，润乾报表也支持这个功能，今天小编主要介绍如何利用润乾报表设计器在报表中实现列表钻取。下面我们以月订单分析为例，举例说明：实际的需求是要求我们首先呈现出每个月的总订单情况，并且点击任意一个月份可以钻取呈现出这个月的详细订单信息...
uni-app-echarts+PC+H5移动端中国地图下钻+标点+统计+放大缩小
HandsomeGuy_的博客
10-21 990
使用版本 基于echarts4.2.1版本开发，高版本不支持移动端点击事件 说明 代码比较灵活，可以进行二次开发 点击下载 预览效果
单击Echart饼图实现数据钻取
細水、長流√的专栏
05-18 1643
使用场景和需求： 　　第一层饼图显示党员党龄分布的情况。 　　 　　点击某个党龄段，查看拥有该党龄段的党支部。 　　 　　默认显示3个党支部，余下的党支部合并为其它，点击其它，查看余下的党支部。 　　 　　点击某个党支部，返回第一层饼图。 技术原理： 　　依靠Echart 点击事件的绑定，通过获取不同的参数向.net后端发送请求获取不同的数据，再将数据重新加载到Echart饼图中。 步骤概述： 　　1、初始Echart图表 　　 　　 　　2、在页面中定义函数
uni-app 使用 echarts 显示湖南地图
E的小小地方
07-30 2862
1、安装依赖 npm install echarts --save 2、页面设置 <template> <view id="map" style="height:345px;width:345px;"></view> </template> 3、引入文件 import echarts from "echarts"; import 'echarts/map/js/province/hunan.js'; 4、地图的基础配置 this
echarts实现向下钻取
仅次于狼的博客
08-23 4153
实现一个向下钻取的效果：柱形图点击柱子则钻取，点击柱图空白返回。 line_chart1 = echarts.init(document.getElementById('lineChart1')); line_option1={ backgroundColor:'#0B2F64', title : { show:true, text: '这是一个标题', ...
探索ECharts 3中的中国地图钻取功能：`echarts3-chinese-map-drill-down`
最新发布
gitblog_00016的博客
04-17 435
探索ECharts 3中的中国地图钻取功能：echarts3-chinese-map-drill-down 去发现同类优质开源项目:https://gitcode.com/ 项目简介 该项目是基于ECharts的一个扩展，特别设计用于在中国地图上实现交互式的数据钻取（Drill Down）功能。ECharts是一个流行的、由百度开发的JavaScript可视化库，它提供了丰富的图表类型和强大的交互...
uniapp引入echarts
09-12
一种简单直接的方式是将Uniapp-Echarts组件包引入项目中，然后根据博文的方法进行使用，不需要使用npm等操作。 具体操作是在页面中引入Echarts组件，并设置option属性为相应的配置项。例如，在页面中使用如下代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值