RayChart

Appearance

光照系统 ​

RayChart 自动配置专业光照，大多数情况无需手动设置。

💡 推荐做法

不配置光照，让框架自动处理。只在需要特殊视觉效果时才自定义。

何时需要自定义光照 ​

  • ✅ 需要特殊氛围（如戏剧性、科技感）
  • ✅ 需要突出特定数据
  • ✅ 需要配合品牌色调
  • ❌ 普通数据展示（用默认即可）

光源类型 ​

环境光 (Ambient) ​

均匀照亮所有物体，提供基础亮度。

javascript
{
  lights: [{
    type: 'Ambient',
    color: '#ffffff',
    intensity: 0.5
  }]
}

方向光 (Directional) ​

模拟太阳光，产生明暗对比和立体感。

javascript
{
  lights: [{
    type: 'Directional',
    color: '#ffffff',
    intensity: 1.0,
    position: { x: 5, y: 10, z: 5 }
  }]
}

点光源 (Point) ​

从一点向四周发光，如灯泡。

javascript
{
  lights: [{
    type: 'Point',
    color: '#ffffff',
    intensity: 1.0,
    position: { x: 0, y: 10, z: 0 }
  }]
}

聚光灯 (Spot) ​

锥形光束，聚焦特定区域。

javascript
{
  lights: [{
    type: 'Spot',
    color: '#ffffff',
    intensity: 1.0,
    position: { x: 0, y: 10, z: 0 },
    target: { x: 0, y: 0, z: 0 }
  }]
}

常用光照方案 ​

javascript
// 适合数据展示
{
  lights: [
    { type: 'Ambient', color: '#ffffff', intensity: 0.6 },
    { 
      type: 'Directional', 
      color: '#ffffff', 
      intensity: 0.8, 
      position: { x: 5, y: 10, z: 5 } 
    }
  ]
}
javascript
// 适合演示展示
{
  lights: [
    { type: 'Ambient', color: '#ffffff', intensity: 0.2 },
    { 
      type: 'Directional', 
      color: '#ffffff', 
      intensity: 1.5, 
      position: { x: 10, y: 15, z: 10 } 
    }
  ]
}
javascript
// 适合科技产品
{
  lights: [
    { type: 'Ambient', color: '#87ceeb', intensity: 0.4 },
    { 
      type: 'Directional', 
      color: '#00d4ff', 
      intensity: 1.0, 
      position: { x: 5, y: 10, z: 5 } 
    }
  ]
}

光照参数 ​

参数说明常用值
type光源类型Ambient, Directional
color光源颜色'#ffffff'
intensity光照强度0.5-1.5
position光源位置{x: 5, y: 10, z: 5}

调试光照 ​

启用光源辅助器查看光源位置：

javascript
{
  series: [{ data: [120, 200, 150] }],
  showLightHelpers: true  // 显示光源位置
}

性能建议 ​

  • 光源数量不超过 3-4 个
  • 避免在移动端使用阴影
  • 环境光 + 方向光组合最常用

相关文档 ​