RayChart

Appearance

图表配置项 ​

完整的图表配置项说明，涵盖所有图表类型的通用配置和特定配置。

配置理念 ​

RayChart 采用智能默认值设计：

  • ✅ 只配置必要数据和业务逻辑
  • ✅ 框架自动处理光照、颜色、材质等
  • ✅ 需要精细控制时再自定义

最佳实践

从最简配置开始，只在需要时添加自定义。保持代码简洁，享受框架智能优化。

通用配置 ​

series ​

  • 类型: Array<Series>
  • 必填: 是
  • 说明: 系列列表，包含图表数据和样式配置
typescript
series: [{
  name: '销售额',           // 系列名称
  data: [120, 200, 150],   // 数据（必填）
  color: ['#42b883'],      // 颜色（可选，自动分配）
  itemStyle: {             // 样式（可选）
    metalness: 0.3,
    roughness: 0.5
  }
}]

语义化组件

使用 RayBar、RayLine 等语义化组件时，不需要指定 series.type。

坐标轴配置 ​

xAxis3D / yAxis3D / zAxis3D ​

  • 类型: Axis3D
  • 说明: 三维坐标轴配置
typescript
xAxis3D: {
  type: 'category',                    // 坐标轴类型
  data: ['Mon', 'Tue', 'Wed'],        // 类别数据（type 为 category 时）
  name: 'Day',                         // 坐标轴名称
  min: 0,                              // 最小值（type 为 value 时）
  max: 100                             // 最大值（type 为 value 时）
}

坐标轴类型：

类型说明适用场景
category类别轴离散的类别数据（如星期、月份）
value数值轴连续的数值数据
time时间轴时间序列数据
log对数轴跨度很大的数值数据

grid3D ​

  • 类型: Grid3D
  • 说明: 三维网格配置
typescript
grid3D: {
  boxWidth: 100,      // 网格宽度
  boxHeight: 100,     // 网格高度
  boxDepth: 100       // 网格深度
}

光照配置 ​

lights ​

  • 类型: Array<Light>
  • 说明: 光源配置（可选，框架会自动配置）
光源类型说明
类型说明适用场景
Ambient环境光提供基础照明，均匀照亮所有物体
Directional方向光模拟太阳光，产生明显的明暗对比
Point点光源从一个点向四周发光，如灯泡
Spot聚光灯锥形光束，如舞台灯光
typescript
lights: [
  {
    type: 'Ambient',
    color: '#ffffff',
    intensity: 0.5
  },
  {
    type: 'Directional',
    color: '#ffffff',
    intensity: 1.0,
    position: { x: 5, y: 10, z: 5 }
  }
]

详见 光照系统

后处理配置 ​

postprocessing ​

  • 类型: Postprocessing
  • 说明: 后处理效果配置
typescript
postprocessing: {
  enable: true,
  bloom: {              // 辉光效果
    enable: true,
    strength: 1.5,
    radius: 0.4,
    threshold: 0.85
  },
  FXAA: {               // 抗锯齿
    enable: true
  }
}

详见 后处理效果

交互配置 ​

controlSettings ​

  • 类型: ControlSettings
  • 说明: 相机控制器配置
typescript
controlSettings: {
  enableRotate: true,        // 启用旋转
  enableZoom: true,          // 启用缩放
  enablePan: true,           // 启用平移
  autoRotate: false,         // 自动旋转
  autoRotateSpeed: 2.0,      // 自动旋转速度
  rotateSpeed: 1.0,          // 旋转速度
  zoomSpeed: 1.0,            // 缩放速度
  minDistance: 10,           // 最小距离
  maxDistance: 100           // 最大距离
}

详见 交互控制

完整示例 ​

typescript
import type { RayChartOption } from 'raychart'

const option: RayChartOption = {
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130]
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}
typescript
import type { RayChartOption } from 'raychart'

const option: RayChartOption = {
  series: [{
    name: '销售额',
    data: [120, 200, 150, 80, 70, 110, 130],
    color: ['#42b883'],
    itemStyle: {
      metalness: 0.3,
      roughness: 0.5
    }
  }],
  xAxis3D: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    name: 'Day'
  },
  yAxis3D: {
    type: 'value',
    name: 'Value',
    min: 0,
    max: 250
  },
  postprocessing: {
    enable: true,
    bloom: {
      enable: true,
      strength: 1.5
    }
  },
  controlSettings: {
    enableRotate: true,
    enableZoom: true,
    enablePan: true,
    autoRotate: false
  }
}

相关文档 ​