React Suite MapChart 组件

React Suite MapChart 组件是一个基于 React 的可视化组件，用于展示地图图表。该组件集成了常见地图图表的功能，如点状地图、热力图、区域地图等，可以快速构建和定制各种类型的地图图表，满足不同需求。

安装

使用 npm 进行安装：

npm install rs-maps

使用

基本使用示例：

import React from 'react';
import { MapChart } from 'rs-maps';

const data = [
  { name: '北京', value: 100 },
  { name: '上海', value: 200 },
  { name: '广州', value: 300 },
  { name: '深圳', value: 400 }
];

const App = () => {
  return (
    <div style={{ width: '800px', height: '600px' }}>
      <MapChart data={data} />
    </div>
  );
};

Props

data: Object[]

描述：数据数组，每个元素代表一个城市或区域，包括城市名称和值。

类型：Object[]

[
  {
    name: '北京',
    value: 100
  },
  {
    name: '上海',
    value: 200
  },
  // ...
]

height: number

描述：组件高度，单位为 px。

类型：number

width: number

描述：组件宽度，单位为 px。

类型：number

type: string

描述：地图类型，包括点状地图、热力图和区域地图。

类型：string

可选值：

• point：点状地图；
• heat：热力图；
• region：区域地图。

默认值：region

mapType: string

描述：地图类型，包括中国地图和世界地图。

类型：string

可选值：

• china：中国地图；
• world：世界地图。

默认值：china

center: [number, number]

描述：地图中心点经纬度，用于设置地图初始位置（只在区域地图中有效）。

类型：[number, number]

默认值：[116.397428, 39.90923]

zoom: number

描述：地图缩放比例，用于设置地图初始缩放（只在区域地图中有效）。

类型：number

默认值：5

itemCfg: Object

描述：区域地图配置项，包括颜色、边框宽度等。

类型：Object

{
  normal: {
    fill: '#e5e5e5',
    stroke: '#999',
    lineWidth: 0.5,
    opacity: 1
  },
  hover: {
    fill: 'rgb(255,22,84)',
    stroke: '#fff',
    lineWidth: 0.5,
    opacity: 1
  }
}

注：normal 代表正常状态下的样式，hover 代表鼠标悬浮时的样式。

pointCfg: Object

描述：点状地图配置项，包括颜色、大小等。

类型：Object

{
  size: 10,
  fill: 'red',
  stroke: 'white',
  lineWidth: 1,
  opacity: 1,
  data: []
}

注：size 代表点的大小，fill 代表填充颜色，stroke 代表描边颜色，lineWidth 代表描边宽度，opacity 代表透明度，data 代表点的数据数组。

heatCfg: Object

描述：热力图配置项，包括颜色、热力半径等。

类型：Object

{
  blur: '15px',
  radius: 30,
  gradient: {
    '0.4': 'blue',
    '0.6': 'cyan',
    '0.7': 'lime',
    '0.8': 'yellow',
    '1.0': 'red'
  }
}

注：blur 代表热力图的模糊程度，radius 代表热力半径，gradient 代表热力图渐变色。

总结

React Suite MapChart 组件是一个实用的地图图表组件，可根据不同需求灵活定制和配置。通过上述介绍，相信大家已经对该组件的基本使用和常规配置有了一定了解，可以尝试在项目中使用并进行进一步开发和优化。