地图+散点图效果：
react项目中安装echarts、echarts-gl依赖：
npm install echarts echarts-gl文件目录结构：
地图组件map目录下文件代码，点击散点图圆点触发事件handleCityClick：
index.jsx：
import { useRef, useEffect, useState, useCallback } from "react";
import * as echarts from "echarts";
import 'echarts-gl';
import customSettings from "@config/customSettings";
import styles from "./style.less";const { PROVINCE_NAME, MAP_NAME, MAP_JSON } = customSettings;const ProvinceMap = ({option,onCityClick,width = "100%",height = "100%",
}) => {const [selectedCity, setSelectedCity] = useState('');const chartRef = useRef(null);const mapInstanceRef = useRef(null); // 使用ref保存实例const handleCityClick = useCallback((name) => {console.log('点击参数:', name);if (name === selectedCity) {setSelectedCity(PROVINCE_NAME);onCityClick(PROVINCE_NAME);} else {setSelectedCity(name);onCityClick(name);}}, [selectedCity, onCityClick, PROVINCE_NAME]);useEffect(() => {if (!chartRef.current) return;// 初始化图表mapInstanceRef.current = echarts.init(chartRef.current);echarts.registerMap(MAP_NAME, MAP_JSON);// 设置选项mapInstanceRef.current.setOption(option);// 添加点击事件 - 3D地图需要特殊处理const handleClick = (params) => {console.log('完整点击参数:', params);// 3D地图点击参数可能的结构const cityName = params.name ||(params.data && params.data.name) ||(params.seriesName === 'map' && params.name);if (cityName) {handleCityClick(cityName);}};mapInstanceRef.current.on('click', handleClick);// 响应式调整const resizeObserver = new ResizeObserver(() => {mapInstanceRef.current?.resize();});resizeObserver.observe(chartRef.current.parentElement);// 清理函数return () => {mapInstanceRef.current?.off('click', handleClick);mapInstanceRef.current?.dispose();resizeObserver.disconnect();};}, [option, MAP_NAME, MAP_JSON, handleCityClick]);// 单独监听selectedCity变化时不重新渲染整个地图useEffect(() => {if (!mapInstanceRef.current) return;// 更新选中状态而不重新初始化mapInstanceRef.current.setOption({series: [{selectedMode: 'single',select: {itemStyle: {color: '#FF4500' // 选中颜色}}}]}, true);}, [selectedCity]);return (<divref={chartRef}className={styles.mapClass}style={{ width, height }}/>);
};export default ProvinceMap;如果想要点击地图区域触发点击事件可以将series的内容替换成下面的代码：
series: [{type: 'map3D',map: customSettings.MAP_NAME,regionHeight: 3, // 区域高度itemStyle: {color: '#1E90FF',borderWidth: 1},emphasis: {itemStyle: {color: '#FFA500'}}}]mapOption.js：
import customSettings from '@config/customSettings';const backgroundColor = '#FFFFFF';
const borderColor = '#cbd1dc';export const MAP_OPTION = {tooltip: {show: false,backgroundColor,borderColor, // 修改边框颜色triggerOn: "mousemove", // 鼠标移动时触发axisPointer: {type: "none",},position: (point, params, dom, rect, size) => {// 解决tooltip在最右侧时部分被遮挡let obj = {};if (point[0] > size.viewSize[0] / 2) {// 鼠标位置位于echarts容器的一半位置右侧时，提示框显示在左侧obj["left"] = point[0] - size.contentSize[0] - 20;} else {obj["right"] = size.viewSize[0] - size.contentSize[0] * 2;}if (point[1] > size.viewSize[1] / 2) {// 鼠标位置位于echarts容器的一半位置下侧时，提示框显示在上侧obj["top"] = point[1] - size.contentSize[1] - 20;} else {obj["bottom"] = size.viewSize[1] - size.contentSize[1] * 1;}return obj;},backgroundColor: "rgba(255,255,255,0.90)", // 提示标签背景颜色textStyle: { color: "#fff" }, // 提示标签字体颜色},visualMap: {show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在type: "continuous", // 类型为连续型视觉映射calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）inRange: {// 定义在选中范围中的视觉元素color: ["#ffd289", "#ff9c45"],},},// 地理坐标系组件geo3D: {map: customSettings.MAP_NAME, // 地图名称，要和echarts注册的地图名称一致// 添加交互roam: false, // 设置为false，禁用地图的漫游功能// 添加立体效果boxHeight: 10, // 地图的高度，默认为0，即不显示立体效果regionHeight: 3, // 地图上每个区域的立体高度，默认为0，即不显示立体效果itemStyle: { // 地图区域的样式设置color: '#1E90FF20',opacity: 0.8,borderWidth: 0.5,borderColor: '#00FFFF'},emphasis: { // 鼠标悬停在地图区域上的样式设置itemStyle: {color: 'rgba(0, 153, 255, 0.3)'},label: { // 鼠标悬停在地图区域上显示的标签样式设置show: true,textStyle: {color: '#fff',fontSize: 12,backgroundColor: 'rgba(0, 0, 0, 0.7)',borderRadius: 3,padding: [4, 8]}}},light: { // 光照设置，用于增强立体效果main: { // 主光源设置intensity: 1.2, // 光源强度，默认为1.2shadow: true, // 是否显示阴影，默认为trueshadowQuality: 'high', // 阴影质量，默认为'high'alpha: 30, // 固定俯仰角度(上下)beta: 40 // 固定方位角度(左右)},ambient: { // 环境光设置intensity: 0.3 // 环境光强度，默认为0.3}},viewControl: { // 视角控制设置，用于调整地图的旋转和缩放等操作distance: 120, // 视角距离地图的距离，默认为120alpha: 40, // 固定俯仰角度(上下)beta: 0, // 固定方位角度(左右)autoRotate: false, // 设置为falserotateSensitivity: 0, // 禁用旋转zoomSensitivity: 0, // 0:禁用缩放}},series: [{type: 'scatter3D',coordinateSystem: 'geo3D',symbolSize: 12,encode: {tooltip: 2 // 第三个值(value[2])显示在tooltip中},itemStyle: {color: '#FF4500',opacity: 0.8},emphasis: {itemStyle: {color: '#00FFFF',borderWidth: 2,borderColor: '#FFF'},label: {show: true,formatter: '{b}',color: '#FFF',backgroundColor: 'rgba(0,0,0,0.7)',padding: [4, 8]}},data: [// 格式: { name: '地市', value: [经度, 纬度, 值] }{ name: '郑州', value: [113.62, 34.75, 90] }, // 省会{ name: '洛阳', value: [112.45, 34.62, 80] }, // 古都{ name: '南阳', value: [112.53, 33.01, 75] }, // 豫西南{ name: '新乡', value: [113.88, 35.30, 70] }, // 豫北{ name: '商丘', value: [115.65, 34.45, 65] }, // 豫东{ name: '安阳', value: [114.38, 36.10, 60] }, // 豫北{ name: '开封', value: [114.31, 34.80, 55] }, // 古都{ name: '焦作', value: [113.24, 35.22, 50] }, // 豫西北{ name: '平顶山', value: [113.19, 33.77, 45] }, // 豫中{ name: '信阳', value: [114.07, 32.13, 40] }, // 豫南{ name: '周口', value: [114.65, 33.62, 35] }, // 豫东南{ name: '驻马店', value: [114.02, 32.98, 30] }, // 豫南{ name: '许昌', value: [113.81, 34.02, 25] }, // 豫中{ name: '漯河', value: [114.02, 33.58, 20] }, // 豫中{ name: '三门峡', value: [111.20, 34.78, 15] }, // 豫西{ name: '鹤壁', value: [114.30, 35.75, 10] }, // 豫北{ name: '濮阳', value: [115.03, 35.77, 8] }, // 豫东北{ name: '济源', value: [112.60, 35.08, 5] } // 省直辖]}]
};style.less：
.mapClass {:global {.custom-tooltip-box {width: 306px;overflow: auto;color: #868686; // li文字颜色font-size: 13px;line-height: 22px;font-weight: 400;.title-text {font-family: PingFangSC-Semibold;font-size: 15px;color: #262626;text-align: center;font-weight: 600;padding-bottom: 3px;border-bottom: 1px dashed #d9d9d9;}ul {margin-top: 7px;padding-left: 5px;padding-right: 10px;li {list-style: none;line-height: 1.5;position: relative;.value-box {position: absolute;display: inline-block;right: 0;.num {color: #262626;font-family: PingFangSC-Semibold;font-size: 13px;font-weight: 600;}}}}}}
}引用地图组件的父组件index.jsx：
import React, { useState, useEffect } from 'react';
import { Progress, Table, Select, Drawer, Radio, DatePicker, Button, message, } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import styles from './style.less';
import ProvinceMap from './map/index';
import { MAP_OPTION } from './map/mapOption';
import { } from './service';
import customSettings from '@config/customSettings';const { PROVINCE_NAME, CAPITAL_AREA_NAME } = customSettings;export default function index() {const [mapIndexsObj, setMapIndexsObj] = useState([]); // 省地市指标值const [mapOption, setMapOption] = useState({}); // 地图optionconst [areaName, setAreaName] = useState(CAPITAL_AREA_NAME); // 地市名称// 获取地图optionuseEffect(() => {let option = { ...MAP_OPTION };// 鼠标移到图里面的浮动提示框option.tooltip.formatter = (params) => {const { name } = params;let shortName = '';if (PROVINCE_NAME.includes('内蒙')) {shortName = name.slice(0, name.length - 1);} else {shortName = name;}let tooltipHtml = `<div class="custom-tooltip-box"><div class="title-text">${shortName}</div><ul>`;// 使用 map 函数遍历数据并构建 HTML 字符串tooltipHtml += mapIndexsObj[shortName]?.map((item, index) => `<li><span>${item.label}</span><div class="value-box"><span class="num">${(item.value != undefined && item.value != null) ? item.value : '--'}</span><span class="unit" style="display: ${(item.value != undefined && item.value != null) ? 'inline' : 'none'}">${item.unit}</span></div></li>`).join('') || ''; // .join('')去除map返回结果中的逗号tooltipHtml += `</ul></div>`return tooltipHtml;};setMapOption(option);}, [mapIndexsObj]);// 点击地图获取地市名称const handleCityClick = (cityName) => {setAreaName(cityName);};return (<div className={styles.container}><ProvinceMap option={mapOption} onCityClick={handleCityClick} /></div>)
}
配置项文件customSettings：
// 用于设置地图、查询条件中“地市”下拉菜单的初始值
import henanMap from "@/assets/map/henan.json";export default {PROVINCE_ID: 37, // 与接口返回的类型保持一致PROVINCE_NAME: '河南省',CAPITAL_AREA_ID: 371, // 与接口返回的类型保持一致CAPITAL_AREA_NAME: '郑州市',MAP_JSON: henanMap,MAP_NAME: 'henan',
};
