Highcharts使用React TypeScript根据数据值填充地图

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const MapChart = () => {
  const options = {
    chart: {
      map: 'custom/world', // 使用自定义地图，可以替换为其他地图模块
    },
    title: {
      text: 'World Map',
    },
    series: [
      {
        name: 'Countries',
        data: [
          ['us', 1], // 根据数据值填充地图
          ['ca', 2],
          // 其他国家数据...
        ],
        mapData: Highcharts.maps['custom/world'], // 使用自定义地图数据
        joinBy: 'hc-key', // 地图数据关联的键名
        states: {
          hover: {
            color: '#BADA55', // 鼠标悬停时的颜色
          },
        },
        dataLabels: {
          enabled: true,
          format: '{point.name}',
        },
      },
    ],
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default MapChart;