RayChart

Appearance

后处理效果 ​

提升视觉表现力。

按需启用

后处理影响性能，移动端建议禁用或降低强度。

辉光效果 (Bloom) ​

明亮区域产生发光，营造科技感。

vue
<script setup>
const chartOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: { data: ['A', 'B', 'C'] },
  postprocessing: {
    enable: true,
    bloom: {
      enable: true,
      strength: 1.5,
      radius: 0.4,
      threshold: 0.85
    }
  }
})
</script>

参数配置 ​

参数类型范围默认值说明
strengthnumber0-31.5辉光强度，值越大效果越明显
radiusnumber0-10.4辉光半径，控制扩散范围
thresholdnumber0-10.85辉光阈值，只有亮度超过此值才发光
javascript
bloom: {
  enable: true,
  strength: 2.0,
  radius: 0.5,
  threshold: 0.7
}
javascript
bloom: {
  enable: true,
  strength: 1.0,
  radius: 0.3,
  threshold: 0.9
}

环境光遮蔽 (SSAO) ​

增强深度感和真实感，物体接触处产生柔和阴影。

javascript
postprocessing: {
  enable: true,
  SSAO: {
    enable: true,
    radius: 0.2,        // 遮蔽半径
    intensity: 1.0,     // 遮蔽强度
    bias: 0.01,         // 偏移值，减少伪影
    minDistance: 0.001, // 最小采样距离
    maxDistance: 0.1    // 最大采样距离
  }
}

性能影响

SSAO 性能消耗最大，建议仅在桌面端使用。

抗锯齿 (FXAA) ​

快速近似抗锯齿，平滑边缘，性能消耗小。

javascript
postprocessing: {
  enable: true,
  FXAA: {
    enable: true
  }
}

推荐使用

FXAA 性能消耗小，建议始终启用。

色调映射 (Tone Mapping) ​

调整图像的整体色调和对比度。

javascript
postprocessing: {
  enable: true,
  toneMapping: {
    enable: true,
    exposure: 1.0,      // 曝光度
    whitePoint: 1.0     // 白点
  }
}

组合使用 ​

同时启用多个效果：

javascript
postprocessing: {
  enable: true,
  bloom: {
    enable: true,
    strength: 1.5,
    radius: 0.4,
    threshold: 0.85
  },
  FXAA: {
    enable: true
  }
}
javascript
postprocessing: {
  enable: true,
  bloom: {
    enable: true,
    strength: 1.5,
    radius: 0.4,
    threshold: 0.85
  },
  SSAO: {
    enable: true,
    radius: 0.2,
    intensity: 1.0
  },
  FXAA: {
    enable: true
  }
}
javascript
postprocessing: {
  enable: true,
  FXAA: {
    enable: true
  }
  // 移动端仅启用 FXAA
}

动态控制 ​

vue
<template>
  <div>
    <RayBar :option="chartOption" />
    <div class="controls">
      <label>
        <input type="checkbox" v-model="bloomEnabled" />
        辉光效果
      </label>
      <label>
        <input type="range" v-model.number="bloomStrength" min="0" max="3" step="0.1" />
        辉光强度: {{ bloomStrength }}
      </label>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RayBar } from 'raychart'

const bloomEnabled = ref(true)
const bloomStrength = ref(1.5)

const chartOption = computed(() => ({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    itemStyle: {
      emissive: '#42b883',
      emissiveIntensity: 0.3
    }
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  postprocessing: {
    enable: true,
    bloom: {
      enable: bloomEnabled.value,
      strength: bloomStrength.value,
      radius: 0.4,
      threshold: 0.85
    },
    FXAA: {
      enable: true
    }
  }
}))
</script>

<style scoped>
.controls {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

label {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

性能对比 ​

效果性能消耗视觉提升推荐场景
FXAA⭐ 很低⭐⭐ 中等所有场景
Bloom⭐⭐ 低⭐⭐⭐ 高桌面端
SSAO⭐⭐⭐⭐ 高⭐⭐⭐⭐ 很高高端桌面端
Tone Mapping⭐ 很低⭐⭐ 中等按需使用

常见问题 ​

为什么辉光效果不明显？
  1. 确保材质有足够的亮度或自发光
  2. 降低 threshold 值
  3. 增加 strength 值
  4. 检查材质的 emissive 和 emissiveIntensity 配置
SSAO 效果太暗？
  1. 降低 intensity 值
  2. 减小 radius 值
  3. 调整光照强度
性能下降明显？
  1. 禁用 SSAO（性能消耗最大）
  2. 降低 bloom 的 radius
  3. 仅在桌面端启用后处理
  4. 使用设备检测动态启用

设备检测 ​

javascript
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

const postprocessing = {
  enable: true,
  bloom: {
    enable: !isMobile,  // 移动端禁用
    strength: 1.5
  },
  FXAA: {
    enable: true  // 所有设备启用
  }
}

相关文档 ​