React Suite 漏斗图组件

React Suite 是一个 React UI 组件库，其中包含漏斗图组件。漏斗图是一种数据可视化图表，可以用来表示流程中不同阶段之间的转化率。React Suite 漏斗图组件易于使用，具有可定制的外观和交互。

安装

使用 npm 安装：

npm install rsuite --save

使用

显示简单的漏斗图：

import { FunnelChart } from 'rsuite';
import 'rsuite/dist/styles/rsuite-default.css';

const data = [
  { name: '浏览量', value: 1000 },
  { name: '点击量', value: 800 },
  { name: '转化量', value: 600 },
  { name: '订单量', value: 400 },
  { name: '支付量', value: 200 },
];

function App() {
  return (
    <FunnelChart data={data} />
  );
}

使用自定义的外观和样式：

import { FunnelChart, Legend } from 'rsuite';
import 'rsuite/dist/styles/rsuite-default.css';

const data = [
  { name: '浏览量', value: 1000 },
  { name: '点击量', value: 800 },
  { name: '转化量', value: 600 },
  { name: '订单量', value: 400 },
  { name: '支付量', value: 200 },
];

const colors = ['#337ab7', '#5cb85c', '#f0ad4e', '#d9534f', '#7d7d7d'];

function App() {
  return (
    <div>
      <FunnelChart
        data={data}
        colors={colors}
        height={300}
        label={{
          formatter: (value, name) => `${name} ${value}`,
          offset: 50,
        }}
      />
      <Legend data={data} />
    </div>
  );
}

API

FunnelChart

| Property | Type | Default | Description | | --- | --- | --- | --- | | data | Array<{ name: string, value: number }> | [] | 数据列表，其中 name 为阶段名称，value 为该阶段的数值 | | colors | Array<string> | ['#FC6767', '#FD9777', '#FEBB77', '#FEE577', '#D5F5A5', '#A5DEE4', '#B2B2B2'] | 每个阶段的颜色 | | label | { formatter?: (value: number, name: string) => string, offset?: number } | { formatter: (value, name) => ${name} ${value}, offset: 15 } | 每个阶段上方的标签，其中 formatter 为格式化函数，offset 为距离顶部的偏移量 | | height | number | 300 | 组件高度 | | width | number | 'auto' | 组件宽度 | | tooltip | boolean | true | 是否显示 Tooltip | | tooltipFormatter | (name: string, value: number, percent: string) => [string, string] | - | Tooltip 内容格式化函数 | | className | string | - | 组件类名 | | style | React.CSSProperties | - | 组件样式 |

Legend (可选)

| Property | Type | Default | Description | | --- | --- | --- | --- | | data | Array<{ name: string, value: number }> | [] | 数据列表，其中 name 为阶段名称，value 为该阶段的数值 | | className | string | - | 组件类名 | | style | React.CSSProperties | - | 组件样式 |

参考链接

• React Suite
• FunnelChart