在react项目用echarts绘制中国地图

文章目录

一、引入echarts
二、下载地图json数据
三、编写react组件
四、组件使用

一、引入echarts

安装：npm i echarts --save
在这里插入图片描述

二、下载地图json数据

由于echarts内部不再支持地图数据，所以要绘制地图需要自己去下载数据。建议使用阿里云的。
地址：https://datav.aliyun.com/portal/school/atlas/area_selector

在这里插入图片描述
默认展示的是全国地图，如果想要某市的json数据，点击对应省份即可。

本文中直接复制了json数据，然后将数据保存为geoJson.js，如下：
在这里插入图片描述

三、编写react组件

// components/chinaMap/index.tsximport { 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;

四、组件使用

// src/views/home/chart/map.tsximport 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;