react ts echart 写一个湖北地图示例

在React TypeScript (TS) 和 ECharts 中创建一个湖北省地图示例，首先你需要安装相关的依赖库。确保已经安装了`@types/react`, `echarts-for-react`, 和 `echarts`。这是一个基本步骤：

1. 安装依赖：

npm install --save react echarts-for-react @types/react @types/echarts echarts

2. 创建一个名为`HubeiMapChart.tsx` 的文件，编写如下代码：

import React from 'react';
import { Chart } from 'echarts-for-react';

interface HubeiData {
  [provinceName: string]: number; // 地区对应的值（这里可以是实际数据）
}

const provincesInHubei: Array<{ name: string }> = [
  // 填充湖北省的省份信息，例如：{ name: '武汉市' },
  // 更多省市区信息...
];

function HubeiMapChart({ data }: { data: HubeiData }) {
  const chartData = {
    tooltip: {},
    visualMap: {
      pieceswise: [
        { value: 0, color: '#ccc' },
        { value: data['武汉市'], color: '#f50' }, // 示例颜色，替换为你需要的颜色
        // 其他城市对应的颜色...
      ],
    },
    series: [
      {
        type: 'map',
        mapType: 'China', // 使用中国地图
        zoom: 4,
        roam: true,
        data: provincesInHubei,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
          },
        },
        emphasis: {
          itemStyle: {
            color: '#fff',
            borderColor: '#333',
            borderWidth: 2,
          },
        },
        onEachSeries: (seriesModel) => ({
          data: seriesModel.getData().map((item) => ({
            name: item.name,
            value: data[item.name],
          })),
        }),
      },
    ],
  };

  return <Chart initOptions={chartData} />;
}

export default HubeiMapChart;

3. 在App组件或者其他地方导入并使用这个图表：

import React from 'react';
import HubeiMapChart from './HubeiMapChart';

function App() {
  // 假设这是你的湖北地区数据，根据实际情况填充
  const hubeiData: HubeiData = {
    武汉市: 1000, // 示例数值
    ... // 其他城市的数据...
  };

  return (
    <div>
      <HubeiMapChart data={hubeiData} />
    </div>
  );
}

export default App;