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

news2024/11/25 3:05:22

文章目录

一、引入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.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;

四、组件使用

// 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;