文章目录
一、引入echarts
安装：npm i echarts --save
二、下载地图json数据
由于echarts内部不再支持地图数据，所以要绘制地图需要自己去下载数据。建议使用阿里云的。
地址：https://datav.aliyun.com/portal/school/atlas/area_selector
默认展示的是全国地图，如果想要某市的json数据，点击对应省份即可。
本文中直接复制了json数据，然后将数据保存为geoJson.js，如下：
三、编写react组件
javascript
// components/chinaMap/index.tsx
import { useRef, useEffect } from "react";
import * as echarts from "echarts";
import { geoJson } from "./geoJson";
const ChinaMap = ({
option,
width = "100%",
height = "100%",
}: {
option: any;
width?: string;
height?: string;
}) => {
const ref = useRef(null);
let mapInstance: echarts.ECharts | null;
const renderMap = () => {
if (ref.current) {
const renderedMapInstance = echarts.getInstanceByDom(ref.current);
if (renderedMapInstance) {
mapInstance = renderedMapInstance;
} else {
mapInstance = echarts.init(ref.current);
}
mapInstance.setOption(option);
}
};
useEffect(() => {
echarts.registerMap("china", geoJson as any);
renderMap();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
window.onresize = function () {
// 调用 echarts实例上 resize 方法
mapInstance?.resize();
};
return () => {
// 销毁实例，销毁后实例无法再被使用。
mapInstance && mapInstance.dispose();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div ref={ref} style={{ width: width, height: height }} />;
};
export default ChinaMap;四、组件使用
javascript
// src/views/home/chart/map.tsx
import React from "react";
import ChinaMap from "@/components/chinaMap/index";
const dataList = [
{
value: 218,
name: "北京",
},
{
value: 122,
name: "广东",
},
{
value: 119,
name: "台湾",
},
{
value: 81,
name: "香港",
},
{
value: 74,
name: "山东",
},
{
value: 68,
name: "江苏",
},
{
value: 62,
name: "浙江",
},
{
value: 49,
name: "上海",
},
{
value: 48,
name: "河北",
},
{
value: 43,
name: "河南",
},
{
value: 41,
name: "辽宁",
},
{
value: 38,
name: "NULL",
},
{
value: 36,
name: "四川",
},
{
value: 33,
name: "湖北",
},
{
value: 31,
name: "湖南",
},
{
value: 29,
name: "安徽",
},
{
value: 28,
name: "吉林",
},
{
value: 26,
name: "江西",
},
{
value: 24,
name: "新疆",
},
{
value: 24,
name: "重庆",
},
{
value: 23,
name: "福建",
},
{
value: 19,
name: "广西",
},
{
value: 18,
name: "山西",
},
{
value: 16,
name: "云南",
},
{
value: 16,
name: "内蒙古",
},
{
value: 16,
name: "黑龙江",
},
{
value: 12,
name: "陕西",
},
{
value: 12,
name: "天津",
},
{
value: 11,
name: "宁夏",
},
{
value: 10,
name: "甘肃",
},
{
value: 8,
name: "贵州",
},
{
value: 4,
name: "西藏",
},
{
value: 4,
name: "青海",
},
{
value: 1,
name: "海南",
},
];
const Map: React.FC = () => {
const option: any = {
title: {
text: "数据地图",
// subtext: "数据来源于阿里云平台",
// sublink: "https://datav.aliyun.com/portal/school/atlas/area_selector",
left: "right",
textStyle: {
color: "#000",
},
},
// 提示框
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2,
formatter: (params: any) => {
const { data = {} } = params;
const { value = 0 } = data;
return `${params.name}<br/>数量: ${value}`;
},
},
// 工具导航
toolbox: {
show: true,
left: "left",
top: "top",
feature: {
// dataView: { readOnly: false },
restore: {},
saveAsImage: {},
},
},
// 地图数据
dataset: {
source: dataList,
},
series: {
type: "map",
map: "china",
roam: true, // 地图拖动、缩放
top: "10%", // 距离顶部距离
zoom: 1.2, // 当前视角的缩放比例
scaleLimit: {
max: 2,
min: 1, // 设置默认缩放效果
},
// 文本标签，地区名, 控制样式，位置等等，可以是数组，多个
label: {
show: true, // 默认状态下，显示省市名称
position: [1, 100], // 相对的百分比
fontSize: 12,
offset: [2, 0],
align: "left",
},
itemStyle: {
areaColor: "#e5f7ff", // 地图图形颜色 #fff
// borderColor: "#a0d4e7", // 地图边框线色
// borderWidth: 1, // 地图边框线宽
},
// 高亮状态下的多边形和文本样式，鼠标悬浮在地图块上的效果
emphasis: {
itemStyle: {
areaColor: "#ccc",
borderColor: "#4aacd9",
},
},
},
// 视觉映射组件
visualMap: {
type: "continuous",
left: "right",
min: 0,
max: 218,
inRange: {
color: [
"#e5f7ff",
"#096dd9",
// "#fedeb5",
// "#f96a35",
// "#c3380e",
// "#942005",
// "#5b1305",
],
},
text: [`最大值：218`, 0],
textStyle: {
color: "#000",
},
// calculable: true
},
};
return (
<>
<ChinaMap option={option} height="80vh" width="100%" />;
</>
);
};
export default Map;展示如下：
本文项目源码：https://download.csdn.net/download/ganyingxie123456/88800965?spm=1001.2014.3001.5503
echarts使用地图主要就是要先下载相关地理数据，其次就是按需求进行常规的option配置，并不难。