• uniapp上echarts地图钻取

    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']
})

    • 1
    • 2
    • 3
    • 4

    参数如下:

    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 // 是否静默状态
	},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
  • 相关阅读:
    2023北京市人工智能大模型场景融合与产业发展专场活动盛大召开
    查看本机Arp缓存，以及清除arp缓存
    枚举类型与联合体类型
    CMake使用基础汇总
    3. MongoDB高级进阶
    Python之网络协议
    【RISC-V】risc-v架构学习笔记（架构初学）
    10 特征向量与特征值
    链动2+1模式：如何快速吸引用户并提高用户留存率？
    从代码操作层面解释什么是“面相对象编程”？
  • 原文地址：https://blog.csdn.net/zhangyun1107892254/article/details/133751883