RayChart

Appearance

后处理效果 ​

RayChart 提供基于 UnrealBloomPass 的辉光（Bloom）后处理效果，让明亮区域产生发光，营造科技感。

按需启用

后处理会降低渲染性能（需要额外渲染一遍到离屏缓冲），移动端建议禁用或降低分辨率。

快速开始 ​

vue
<script setup>
const chartOption = ref({
  series: [{ data: [120, 200, 150] }],
  xAxis3D: { data: ['A', 'B', 'C'] },
  postprocessing: {
    bloom: {
      enabled: true,      // 启用辉光
      strength: 1.5,      // 辉光强度
      radius: 0.4,        // 辉光半径
      threshold: 0.85,    // 亮度阈值
    },
  },
});
</script>

参数配置 ​

参数类型默认值说明
bloom.enabledbooleanfalse是否启用辉光
bloom.selectivebooleanfalse选择性辉光：仅对图表主体发光，避免背景和标签发光
bloom.strengthnumber透传默认辉光强度，值越大效果越明显
bloom.radiusnumber透传默认辉光半径，控制扩散范围
bloom.thresholdnumber透传默认亮度阈值，只有亮度超过此值的区域才发光
bloom.resolutionScalenumber0.5辉光渲染分辨率比例（0.25-1），越小性能越好

选择性辉光

开启 selective: true 后，辉光只作用于调用过 setBloomSource 标记的图表主体（各图表已内置标记），背景和其他 UI 元素不会发光。

参数建议 ​

javascript
bloom: {
  enabled: true,
  strength: 2.0,
  radius: 0.5,
  threshold: 0.7,
}
javascript
bloom: {
  enabled: true,
  strength: 1.0,
  radius: 0.3,
  threshold: 0.9,
}
javascript
bloom: {
  enabled: true,
  resolutionScale: 0.25, // 降低分辨率提升性能
  strength: 1.0,
}

动态控制 ​

配置是响应式的，通过计算属性即可实时调整辉光参数：

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] }],
  xAxis3D: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  postprocessing: {
    bloom: {
      enabled: bloomEnabled.value,
      strength: bloomStrength.value,
      radius: 0.4,
      threshold: 0.85,
    },
  },
}));
</script>

常见问题 ​

为什么辉光效果不明显？
  1. 确保材质的颜色足够亮，或配置 emissive / emissiveIntensity 自发光
  2. 降低 threshold 值，让更多区域参与发光
  3. 增加 strength 值
背景也跟着发光怎么办？

开启 bloom.selective: true，辉光将只作用于图表主体。

性能下降明显？
  1. 降低 resolutionScale（如 0.25）
  2. 减小 radius 值
  3. 在移动端直接禁用 bloom

相关文档 ​