地图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, // 设置所有散点的大小为 10label: {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>
