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

以下是一个基于 React 和 ECharts 的函数式组件，用 TypeScript 实现的乌兰察布地图显示：

import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';

interface IMapData {
  name: string;
  value: number;
}

interface IMapProps {
  mapData: IMapData[];
}

const UlanqabMap: React.FC<IMapProps> = ({ mapData }) => {
  const chartRef = useRef<HTMLDivElement>(null);

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

      chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (人)',
        },
        visualMap: {
          type: 'piecewise',
          pieces: [
            { min: 100000, label: '>=100000', color: '#7f1100' },
            { min: 50000, max: 99999, label: '50000-99999', color: '#ff5428' },
            { min: 10000, max: 49999, label: '10000-49999', color: '#ff8c71' },
            { min: 1000, max: 9999, label: '1000-9999', color: '#ffd768' },
            { max: 999, label: '0-999', color: '#ffffff' },
          ],
          calculable: true,
          inverse: true,
          left: 'left',
          top: 'bottom',
        },
        series: [
          {
            name: '乌兰察布市',
            type: 'map',
            mapType: '乌兰察布市',
            label: {
              show: true,
            },
            data: mapData,
          },
        ],
      });
    }
  }, [mapData]);

  return <div ref={chartRef} style={{ height: '500px' }} />;
};

export default UlanqabMap;

在组件中，通过 `IMapData` 和 `IMapProps` 来定义地图数据和组件属性类型。`chartRef` 用于获取组件中的 DOM 元素，`useEffect` 钩子函数用于初始化 ECharts 实例，并设置地图的样式和数据。最后，通过返回一个包含 `chartRef` 的 `div` 元素，将地图显示在页面上。