vue3+echarts+DataV实现省市县地图

地图json数据从这里下面
DataV.GeoAtlas地理小工具系列

1.效果图

2.html

<div class="map">
                <div style="width: 750px;height: 584px;" id="myMap"></div>
              </div>

3.javaScript

<script setup lang="ts">
import * as echarts from 'echarts';
import huanggang from '@/assets/map/json/huanggang.json';
let mapOption = {
		geo: {
			// 地图类型，指定使用的地图
			map: "huanggang",
			// roam: true,
			zoom: 1.21, //地图放大
			// 地图区域标签的样式配置
			label: {
				// 通常状态下的样式
				// show: true, // 显示标签
				color: "#ffffff", // 标签文本颜色为白色
			},

			// 地图区域的样式设置
			itemStyle: {
				// 区域边界的颜色和宽度
				borderColor: "rgba(147, 235, 248)",
				borderWidth: 1,

				// 区域颜色设置为径向渐变
				areaColor: {
					type: "radial", // 渐变类型为径向渐变
					x: 0.5, // 渐变的 x 坐标（相对于区域）
					y: 0.5, // 渐变的 y 坐标（相对于区域）
					r: 0.8, // 渐变的半径
					colorStops: [{
							offset: 0,
							color: "rgba(64, 143, 240)", // 0% 位置的颜色（透明）
						},
						{
							offset: 1,
							color: "rgba(94, 168, 248)", // 100% 位置的颜色
						},
					],
					globalCoord: false, // 是否使用全局坐标系统（默认 false）
				},

				// 阴影设置
				shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
				shadowOffsetX: -2, // 阴影在 x 轴的偏移
				shadowOffsetY: 2, // 阴影在 y 轴的偏移
				shadowBlur: 10, // 阴影模糊半径
			},

            emphasis: {
                
                itemStyle: {
                    areaColor: '',
                    color:'#fff'
                },
                label: {
        show: true,
        color: 'white'
    }
            }
		},
	};
const initChartMap = () => {
		let that = this
		// 基于准备好的dom，初始化echarts实例
		let myMapChart = echarts.init(document.getElementById('myMap'))
		echarts.registerMap('huanggang', huanggang as any)
		myMapChart.setOption(mapOption);
		getMapData({ cityId: 16031 }).then((res: any) => {
			const option = {
				series: [{
					type: "effectScatter",
					name: "散点",
					coordinateSystem: "geo",
					data: res.data,
					effectType: 'ripple',
					rippleEffect: { //设置涟漪特效 
						period: 0, //设置动画的时间，数字越小，动画越快 
						scale: 4, //设置动画中波纹的最大缩放比例 
						brushType: 'stroke', //设置波纹的绘制方式，可选'stroke'和'fill' 
					},
					itemStyle: {
						color: '#e1d02b', 
						shadowBlur: 10, // 设置散点的阴影模糊大小
						shadowColor: '#e1d02b', // 设置散点阴影的颜色为深灰色
					},
                    symbol: 'image://' + icon1,
                    emphasis: {
                    scale: true, // 鼠标悬停时缩放图片
                    symbol: 'image://' + icon2, // 悬停时替换的图片
                    symbolSize: 10 // 悬停时的图片大小
                },
					symbolSize: 25, // 设置所有散点的大小为 10
                    label: {
                        show: false, // 默认不显示标签
                    },
                    hoverAnimation: true,
				}],
                // 为散点添加tooltip的显示内容，这里假设数据中的name属性为要显示的名称
                tooltip: {
                    show: true, // 始终启用 Tooltip，但无内容时不显示
                trigger: "item",
                position:'top',

                formatter: function (params:any) {
                    // 显示散点的名称作为提示信息
                    if (params.seriesType == "effectScatter" && params.data) {
                        return `${params.name}`;
                    }else{
                        return "";
                    }
                    
                },
                backgroundColor: "rgba(50, 50, 50, 0.8)", // Tooltip 背景色
				borderWidth: 0,
                textStyle: {
                    color: "#fff", // Tooltip 文本颜色
                },
            },
			};
			// 地图注册，第一个参数的名字必须和option.geo.map一致
			myMapChart.setOption(option);
		})
	}
</script>