react echarts引入地图json文件实现乌兰察布地图显示 函数组件ts实现

首先，需要安装 `echarts` 和 `echarts-for-react`：

npm install echarts echarts-for-react

然后，在项目中引入乌兰察布地图的 json 文件。可以在 echarts 官网的地图下载页面下载对应地图的 json 文件。

假设下载得到的文件名为 `ulanchabu.json`，将其放在项目的 `public` 文件夹下。

接着，就可以在代码中使用 echarts-for-react 来渲染地图了。以下是一个示例：

import React from "react";
import ReactEcharts from "echarts-for-react";

type MapData = {
  name: string;
  value: number;
};

type MapOption = {
  series: {
    type: string;
    mapType: string;
    roam: boolean;
    label: {
      show: boolean;
    };
    data: MapData[];
  }[];
};

const UlanChabuMap: React.FC = () => {
  const mapGeoJson = require("../../public/ulanchabu.json");

  const option: MapOption = {
    series: [
      {
        type: "map",
        mapType: "none",
        roam: true,
        label: {
          show: true,
        },
        data: [
          { name: "集宁区", value: 100 },
          { name: "卓资县", value: 200 },
          { name: "化德县", value: 150 },
          { name: "商都县", value: 300 },
          { name: "兴和县", value: 250 },
          { name: "丰镇市", value: 200 },
          { name: "凉城县", value: 50 },
          { name: "察哈尔右翼前旗", value: 100 },
          { name: "察哈尔右翼中旗", value: 80 },
          { name: "察哈尔右翼后旗", value: 90 },
        ],
      },
    ],
  };

  return (
    <ReactEcharts
      style={{ height: "500px", width: "100%" }}
      option={{
        ...option,
        geo: {
          map: "乌兰察布市",
          roam: true,
          label: {
            show: true,
          },
          itemStyle: {
            areaColor: "#f2f2f2",
            borderColor: "#ddd",
          },
          emphasis: {
            itemStyle: {
              areaColor: "#f9d5d5",
            },
            label: {
              show: true,
            },
          },
        },
        series: [
          {
            ...option.series[0],
            mapType: "乌兰察布市",
            data: option.series[0].data.map((item) => {
              return {
                name: item.name,
                value: item.value,
              };
            }),
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#f2f2f2",
              borderColor: "#ddd",
            },
            emphasis: {
              itemStyle: {
                areaColor: "#f9d5d5",
              },
              label: {
                show: true,
              },
            },
          },
        ],
      }}
      notMerge={true}
      lazyUpdate={true}
      mapOption={{
        geoJSON: mapGeoJson,
        specialAreas: {},
      }}
    />
  );
};

export default UlanChabuMap;

这个示例中，我们定义了一个 `UlanChabuMap` 组件，用来展示乌兰察布市的地图。

首先，我们在组件中引入了 `ulanchabu.json` 文件，并将其赋值给 `mapGeoJson` 变量。

接着，我们定义了一个 `option` 对象，用来配置地图的样式和数据。在这个对象中，我们定义了一个 `series` 数组，其中包含了一个 `type` 为 `"map"` 的系列，表示这是一个地图系列；`mapType` 为 `"none"`，表示此时地图还没有加载；`roam` 为 `true`，表示可以通过鼠标拖动和缩放地图；`label` 对象的 `show` 属性为 `true`，表示显示地图上每个区域的名称；`data` 数组表示每个区域的数据，这里只是模拟数据，实际中需要根据实际情况来设置。

接着，在组件的返回值中，我们使用 `ReactEcharts` 组件来渲染地图。在这个组件中，我们传入了以下几个属性：

- `style`：用来设置地图的高度和宽度。
- `option`：用来设置地图的配置项。在这里，我们将之前定义的 `option` 对象传入，并对其进行了一些修改，使其能够正确地显示乌兰察布市的地图。
- `notMerge` 和 `lazyUpdate` 属性都为 `true`，表示不进行合并和延迟更新。
- `mapOption`：用来设置地图的配置项，包括地图的 GeoJSON 数据和特殊区域的配置。在这里，我们将之前引入的 `ulanchabu.json` 文件传入，作为地图的 GeoJSON 数据。

最后，我们将 `UlanChabuMap` 组件导出，就可以在其他地方使用它来展示乌兰察布市的地图了。