xyz-chart

基于 React 和 Three.js 的 3D 数据可视化组件库。

特性

• 提供柱状图、曲线图、饼图、词云图和曲面图组件。
• 支持单系列和多系列数据展示。
• 支持拖拽旋转、滚轮缩放和悬停提示等 3D 交互。
• 通过统一的 option 配置组件数据。

安装

pnpm add xyz-chart three

或：

npm install xyz-chart three

three 是运行时依赖，需要与组件库一起安装。

快速开始

所有图表都会填充父容器，因此父容器需要设置明确的宽度和高度。

import { BarChart } from 'xyz-chart';

const option = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五'],
  },
  series: {
    name: '访问量',
    data: [120, 200, 150, 80, 170],
  },
};

export default function App() {
  return (
    <div style={{ width: '100%', height: 600 }}>
      <BarChart option={option} />
    </div>
  );
}

组件

| 组件 | 用途 | 导出名称 | | ---------- | ------------------------ | ----------------- | | 柱状图 | 单系列分类数据对比 | BarChart | | 多维柱状图 | 多系列分类数据对比 | MatrixBarChart | | 曲线图 | 单系列趋势数据展示 | LineChart | | 多维曲线图 | 多系列趋势数据展示 | MatrixLineChart | | 饼图 | 分类占比和构成分析 | PieChart | | 词云图 | 关键词权重和词频展示 | WordChart | | 曲面图 | 三维点数据和高度渐变展示 | SurfaceChart |

配置

BarChart

<BarChart
  option={{
    color: '#5470c6',
    xAxis: {
      data: ['A', 'B', 'C'],
    },
    series: {
      name: '销量',
      data: [120, 200, 150],
    },
  }}
/>

| 属性 | 类型 | 说明 | | -------------------- | ---------- | ---------------- | | option.color | string | 柱状图颜色，可选 | | option.xAxis.data | string[] | 横轴分类 | | option.series.name | string | 系列名称，可选 | | option.series.data | number[] | 数据值 |

LineChart

LineChart 与 BarChart 使用相同的数据结构：

<LineChart
  option={{
    color: '#91cc75',
    xAxis: { data: ['一季度', '二季度', '三季度'] },
    series: { name: '收入', data: [120, 180, 230] },
  }}
/>

MatrixBarChart / MatrixLineChart

多系列组件的 series 是数组，每个系列可以单独设置颜色和标签。

<MatrixBarChart
  option={{
    xAxis: { data: ['周一', '周二', '周三'] },
    series: [
      {
        name: '邮件',
        data: [120, 200, 150],
        color: '#5470c6',
        label: { show: true },
      },
      {
        name: '消息',
        data: [100, 180, 170],
        color: '#91cc75',
      },
    ],
  }}
/>

MatrixLineChart 的 option 结构相同，只需替换组件名称。

| 属性 | 类型 | 说明 | | ------------------- | ---------- | ---------------------- | | option.xAxis.data | string[] | 横轴分类 | | option.series | Series[] | 多个数据系列 | | series.name | string | 系列名称 | | series.data | number[] | 数据值 | | series.color | string | 系列颜色，可选 | | series.label.show | boolean | 是否显示数据标签，可选 |

PieChart

<PieChart
  option={{
    series: {
      name: '来源',
      data: [
        { name: '搜索引擎', value: 1048 },
        { name: '直接访问', value: 735 },
        { name: '邮件营销', value: 580 },
      ],
      radius: '40%',
      diffHeight: true,
      roseType: false,
    },
  }}
/>

| 属性 | 类型 | 说明 | | -------------------------- | ----------------------------------- | ---------------------------- | | option.series.name | string | 系列名称，可选 | | option.series.data | { name: string; value: number }[] | 饼图数据 | | option.series.radius | string | 内孔半径，可选 | | option.series.diffHeight | boolean | 是否根据数据呈现高度差，可选 | | option.series.roseType | boolean | 是否使用玫瑰图效果，可选 |

WordChart

<WordChart
  option={{
    animate: true,
    series: {
      name: '关键词',
      data: [
        { name: 'React', weight: 980 },
        { name: 'Three.js', weight: 720 },
        { name: 'TypeScript', weight: 560 },
      ],
    },
  }}
/>

| 属性 | 类型 | 说明 | | -------------------- | ------------------------------------ | ---------------------- | | option.animate | boolean | 是否自动旋转，默认开启 | | option.series.name | string | 系列名称，可选 | | option.series.data | { name: string; weight: number }[] | 词语及其权重 |

SurfaceChart

曲面图的 series.data 是顶点坐标数组，每三个数字依次表示一个点的 x、y、z 坐标：

<SurfaceChart
  option={{
    series: {
      name: '曲面',
      data: [-10, 20, -10, 0, 30, -10, 10, 25, -10],
      colors: [
        { per: 0, color: '#ff0000' },
        { per: 50, color: '#00ffff' },
        { per: 100, color: '#ffff00' },
      ],
    },
  }}
/>

colors 支持两种格式：

// 两种或多种颜色会在 0% 到 100% 之间等分渐变
colors: ['#ff0000', '#ffff00'];

// 使用颜色 stops 自定义渐变位置
colors: [
  { per: 0, color: '#ff0000' },
  { per: 20, color: '#00ff00' },
  { per: 60, color: '#0000ff' },
  { per: 100, color: '#ffff00' },
];

per 表示颜色在高度范围中的百分比，取值范围为 0 到 100。 组件会根据顶点的 y 值，在相邻颜色 stop 之间进行线性插值。

交互

• 拖拽图表可旋转视角。
• 滚轮可缩放图表。
• 柱状图、曲线图和饼图支持悬停提示。
• 多系列图表支持为每个系列设置颜色和数据标签。
• 词云图默认自动旋转，可设置 animate: false 关闭。

LICENSE

MIT