地图组件:
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;