首先，需要安装 `echarts` 和 `echarts-for-react`： ``` npm install echarts echarts-for-react ``` 然后，在项目中引入乌兰察布地图的 json 文件。可以在 echarts 官网的地图下载页面下载对应地图的 json 文件。 假设下载得到的文件名为 `ulanchabu.json`，将其放在项目的 `public` 文件夹下。 接着，就可以在代码中使用 echarts-for-react 来渲染地图了。以下是一个示例： ```tsx 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` 组件导出，就可以在其他地方使用它来展示乌兰察布市的地图了。
