uniapp 行政区域地图实现

直接上效果图

该效果依赖 秋云uCharts 实现
官方文档：uCharts官网 - 秋云uCharts跨平台图表库
uniapp插件下载地址：秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场
地图数据下载链接：DataV.GeoAtlas地理小工具系列

成功导入以后

html部分

<template>
	<view class="charts-box">
		<qiun-data-charts type="map" :opts="opts" :chartData="chartData" @getIndex="getIndex" />
	</view>
</template>

在地图网站下载数据以后放入项目中引入即可，主要用的是数据中的 features 列表

js部分

<script>
	import zhengzhou from '@/common/zhengzhou.json'
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['map'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					enableScroll: false,
					extra: {
						map: {
							border: true,
							borderWidth: 2,
							borderColor: "#666666",
							fillOpacity: 0.6,
							activeBorderColor: "#000",
							activeFillColor: "#28faf3",
							activeFillOpacity: 1
						}
					}
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {series: zhengzhou.features};
					console.log(zhengzhou)
					console.log(res)
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getIndex(e){
				console.log(e)
			}
		}
	};
</script>