获取乌兰察布地图 echarts react 函数组件ts、

以下是一个基于 React 和 ECharts 的乌兰察布地图组件的 TypeScript 函数组件示例：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts/map/js/province/inner-mongolia';

interface MapProps {
  width: string | number;
  height: string | number;
}

const Map: React.FC<MapProps> = ({ width, height }) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);

      chart.setOption({
        tooltip: {
          trigger: 'item',
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
        },
        series: [
          {
            name: '乌兰察布市',
            type: 'map',
            mapType: '内蒙古', // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: [
              { name: '集宁区', value: Math.round(Math.random() * 1000) },
              { name: '卓资县', value: Math.round(Math.random() * 1000) },
              { name: '化德县', value: Math.round(Math.random() * 1000) },
              { name: '商都县', value: Math.round(Math.random() * 1000) },
              { name: '兴和县', value: Math.round(Math.random() * 1000) },
              { name: '丰镇市', value: Math.round(Math.random() * 1000) },
            ],
          },
        ],
      });
    }
  }, []);

  return <div ref={chartRef} style={{ width, height }} />;
};

export default Map;

使用方法：

<Map width="100%" height="500px" />

这个例子中，我们使用 `useRef` 获取到组件的 `div` 元素，然后在 `useEffect` 中初始化 ECharts 实例，并设置地图的数据和样式。最后，我们将 `div` 的引用传递给 ECharts 实例，以便它可以在其中绘制地图。