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

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

npm install echarts echarts-for-react

然后在组件中引入：

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

interface Props {
  option: echarts.EChartsOption;
}

const MapChart: React.FC<Props> = ({ option }) => {
  const chartRef = useRef<EChartsReact>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = chartRef.current.getEchartsInstance();
      chartInstance.setOption(option);
    }
  }, [option]);

  return (
    <EChartsReact
      ref={chartRef}
      style={{ width: '100%', height: '500px' }}
      opts={{ renderer: 'canvas' }}
    />
  );
};

export default MapChart;

这里使用了 `useRef` 来获取 `EChartsReact` 实例，并使用 `useEffect` 监听 `option` 属性变化，更新图表数据。在组件中传入 `option` 属性即可实现地图的渲染。