chart中国地图点击事件,立体地图制作

1.chart地图使用

废话少说直接上代码,在解析( 此方法是vue3+vite)
1.地图样式

1.地图页面
地图组件

<script setup>
//引入地图
import * as echarts from 'echarts'
//父组件点击事件
//这里是父组件获取点击省份名字
const $emit = defineEmits(['province-click'])

const mapRef = ref(null)
let chart = null
onMounted(() => {
	initMap()
	// 绑定事件 一定要在DOM渲染完后再去绑定
	chart.on('click', params => {
		if (params.componentType === 'geo' && params.name) {
		//不可选择多个省份
			chart.dispatchAction({
				type: 'geoSelect',
				geoIndex: 0,
				name: params.name
			})
			// 触发自定义事件，传递省份名称
			// params.name 拿到的是省份名称 所以如果想要获取省份 省会的话 可自行扩展
			// 父组件会展示用法 
			$emit('province-click', params.name)
		}
	})
})

//初始化地图
const initMap = () => {
	chart = echarts.init(mapRef.value)
	const option = {
		geo: [
			{
				map: 'china',
				zlevel: 1,
				zoom: 1.6,
				selectedMode: 'single',
				label: {
					show: true, // 显示省份标签
					color: '#fff', // 白色文字
					borderColor: '#249adb', // 边框颜色
					borderWidth: 1, // 边框宽度
					backgroundColor: '#04395d',
					padding: [2, 4], // 内边距
					fontSize: 8,
				},
				center: [105.5, 37.5], // 偏移中心点
				itemStyle: {
					areaColor: 'rgba(0, 40, 77, 0.9)',
					borderWidth: 0.1,
					borderColor: '#021a43',
					borderType: 'solid',
					shadowColor: 'rgba(102, 169, 233, 0.9)',
					shadowBlur: 5,
					shadowOffsetX: 5,
					shadowOffsetY: 2
				},
				emphasis: { // 鼠标悬停效果高亮状态
					label: {
						show: true,
						color: '#fff'
					},
					itemStyle: {
						areaColor: '#20c0ee' // 悬停颜色
					}
				},
				select: { // 点击样式（选中样式）
					label: {
						show: true,
						color: '#fff'
					},
					itemStyle: {
						areaColor: '#20c0ee' // 选中颜色
					}
				},
				regions: [
					{
						name: '北京市',
						itemStyle: {
							areaColor: 'f0b50f' // 高亮色
						},
						label: {
							color: '#ee0202',
							borderColor: '#f0b50f', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#f0b50f',
							padding: [2, 4], // 内边距
							fontSize: 12,
						},
					},
					{
						name: '重庆市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#ee0202', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#ee0202',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					},
					{
						name: '上海市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#3cf166', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#3cf166',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					},
					{
						name: '天津市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#4472c4', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#4472c4',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					}
				],
			}, {
				map: 'china',
				zlevel: 1,
				zoom: 1.6,
				center: [105.7, 37.3],     // 主地图位置
				selectedMode: 'single',
				silent: true,
				itemStyle: {
					areaColor: {
						type: 'linear',
						x: 0, y: 0, x2: 0, y2: 1,
						colorStops: [
							{ offset: 0, color: 'rgba(33, 178, 225, 0.7)' }, // 顶部反光
							{ offset: 1, color: 'rgba(34, 117, 182, 1)' }
						]
					},
				},
				regions: [
					{
						name: '北京市',
						itemStyle: {
							areaColor: 'f0b50f' // 高亮色
						},
						label: {
							color: '#ffea00',
							borderColor: '#f0b50f', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#f0b50f',
							padding: [2, 4], // 内边距
							fontSize: 12,
						},
					},
					{
						name: '重庆市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#ee0202', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#ee0202',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					},
					{
						name: '上海市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#3cf166', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#3cf166',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					},
					{
						name: '天津市',
						itemStyle: {
							areaColor: '#00ffff' // 高亮色

						},
						label: {
							color: '#FFFFFF',
							borderColor: '#4472c4', // 边框颜色
							borderWidth: 1, // 边框宽度
							backgroundColor: '#4472c4',
							padding: [2, 4], // 内边距
							fontSize: 8,
						}
					}
				],
			}],
		// 多对一光轨
		series: [
			// 线条
			{
				type: 'lines',
				zlevel: 2,
				// 线条数据
				data: props.points,
				selectedMode: 'single',
				lineStyle: {
					color: '#ffffff', // 线条颜色
					width: 1, // 线条宽度
					type: 'dashed', // 线条类型
				},
				effect: {
					show: true,
					period: 4,
					// 特效图形的标记，可以使用图片链接，或者"path://"+svg图标的矢量路径
					symbol: "circle",
					symbolSize: 4,
					color: "#00ffff",
				},
				symbolSize: [0, 0], // 隐藏线条两端的箭头
			},
			{
				type: 'effectScatter',
				data: props.points, // 数据格式与图层map一致，需包含name，value
				coordinateSystem: 'geo', // 使用坐标系
				selectedMode: 'single',
				symbolSize: 8, // 涟漪大小
				showEffectOn: 'render', // 特效出现时机
				rippleEffect: { // 涟漪特效相关配置
					brushType: 'stroke', // 涟漪款式，推荐这个，另一个有点丑
					color: '#b02a02', // 涟漪颜色
					scale: 5, // 波纹缩放比例
				},
				label: {
					show: true,
					position: 'right',
					formatter: '{b}',
				},
				zlevel: 3,
			},

		]
	}
	chart.setOption(option)
}
</script>

<template>
	<div ref="mapRef" class="map-container"></div>
</template>

<style scoped>
.map-container {
	width: 98%;
	height: 98%;
	margin: 0 auto;
	/* margin-top: -140px; */
	/* background-color: antiquewhite; */
}
</style>

2.展示页面以及事件传递
父组件

<script setup name='Themiddlepart'>
const provinceCapital = {
		'吉林省': '长春',
		'黑龙江省': '哈尔滨',
		'江苏省': '南京',
		'浙江省': '杭州',
		'安徽省': '合肥',
		'福建省': '福州',
		'江西省': '南昌',
		'山东省': '济南',
		//自行扩展
	}
const handleProvinceClick = (province) => {
     //这里通过地图组件拿到的省份名称 想要获取到市 需要进一步处理
	const capital = provinceCapital.value[province] || province
	//这里capital 得到的市上面Map映射到的参数
	//比如province传入的市吉林省 capital 得到的就是长春
};

</script>
<template>
	<div>
		<div class="panel">
		//引入地图组件
			<ChinaMap :points="mapPoints" @province-click="handleProvinceClick" />
		</div>
	</div>
</template>
<style lang='scss' scoped>
	.panel {
		overflow: hidden;
		z-index: 1;
	}
</style>

3.地图显示层级问题
echarts地图是采用定位的方式在最上面 所以会遮挡别的元素
解决方法 上述 降低地图盒子的优先级 增加邻近盒子的优先级