antd react echarts地图组件及使用

 地图组件：

import { useRef, useEffect } from "react";
import * as echarts from "echarts";
import chinaJson from './chinaJson';const MapIndex = ({option,width = "100%",height = "100%",
}) => {const ref = useRef(null);let mapInstance;const renderMap = () => {if (ref.current) {const renderedMapInstance = echarts.getInstanceByDom(ref.current);if (renderedMapInstance) {mapInstance = renderedMapInstance;} else {mapInstance = echarts.init(ref.current);}mapInstance.setOption(option);// 点击地图事件mapInstance.on("click", (params) => {console.log(params);});}};useEffect(() => {//注册地图到echarts中,这里的'china'要与地图数据的option中的series、geo中的map属性值对应echarts.registerMap('china', chinaJson);renderMap();}, []);useEffect(() => {window.onresize = function () {// 调用echarts实例上resize方法mapInstance?.resize();};return () => {// 销毁实例，销毁后实例无法再被使用mapInstance && mapInstance.dispose();};}, []);return <div id={styles.map} ref={ref} style={{ width, height }} />;
};export default MapIndex;

chinaJson文件从 DataV.GeoAtlas地理小工具系列获取：

组件使用：

import { useRef, useEffect } from "react";
import MapIndex from './MapIndex';const Index = () => {let option = {tooltip: {},visualMap: {show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在type: "continuous", // 类型为连续型视觉映射calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）inRange: {color: ["#ffd258", "#ff9e45"],},},// 地理坐标系组件geo: {map: 'china',aspectScale: 0.75, //长宽比zoom: 1.2,roam: false, // 滚轮 放大缩小emphasis: {label: {show: false,},},itemStyle: {areaColor: {// 默认区块颜色type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#BFFFDD", // 0% 处的颜色},{offset: 1,color: "#FFFFFF", // 100% 处的颜色},],},shadowColor: "#FFFFFF", // 青色shadowBlur: 0,shadowOffsetX: 10,shadowOffsetY: 10,borderWidth: 0,},},series: [{id: "map",type: "map", // 图表类型map: 'china', // 已注册的地图aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示roam: false,label: {show: true,color: "#333",fontWeight: 700,textShadowBlur: 5,textShadowOffsetX: 0,textShadowOffsetY: 4,},emphasis: {label: {color: "#e8eefc",}},select: {// 选中状态下的多边形和标签样式itemStyle: {borderColor: "#67E51F",borderWidth: 1,areaColor: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "#A3DF7F", // 0% 处的颜色},{offset: 1,color: "#017E0F", // 100% 处的颜色},],},},label: {color: "#e8efce",},},itemStyle: {// 地图区域的多边形 图形样式borderColor: "#017E0F",borderWidth: 0.4,areaColor: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "#BFDFDF", // 0% 处的颜色},{offset: 1,color: "#FFFFFF", // 100% 处的颜色},],},},emphasis: {itemStyle: {areaColor: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#A3DF7F", // 0% 处的颜色},{offset: 1,color: "#017E0F", // 100% 处的颜色},],},borderColor: "#67E51F",borderWidth: 1,shadowColor: "rgba(103, 225, 245, 0.7)",shadowBlur: 10,shadowOffsetX: 0,shadowOffsetY: 0,}},zoom: 1.2,animation: false,data: [{value: 218,name: "北京",},{value: 122,name: "广东",},],},], // 图表数据};<MapIndex option={option} height="100%" width="100%" />;
}export default Index;