RayChart

Appearance

水球图 ​

3D 水球图用于展示百分比数据，具有动态的水波效果，适合展示进度、完成率等指标。

快速开始 ​

vue
<template>
  <RayLiquid :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue'
import { RayLiquid } from 'raychart'

const chartOption = ref({
  series: [{
    data: [{ value: 0.6, name: '完成率' }],
    radius: 7
  }]
})
</script>

数据格式

水球图的 value 为 0-1 之间的小数，表示百分比（0.6 = 60%）。

核心配置 ​

属性类型默认值说明
radiusnumber7水球半径
itemStyle.waveScalenumber0.05波浪幅度
itemStyle.waveSpeednumber0.06波浪速度
itemStyle.opacitynumber0.9透明度

常见场景 ​

自定义波浪效果 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [{ value: 0.75, name: '项目进度' }],
    radius: 8,
    itemStyle: {
      waveScale: 0.08,    // 增大波浪幅度
      waveSpeed: 0.1,     // 加快波浪速度
      opacity: 0.85
    }
  }]
})
</script>

多个水球对比 ​

vue
<template>
  <div style="display: flex; gap: 20px;">
    <RayLiquid :option="option1" width="300px" height="400px" />
    <RayLiquid :option="option2" width="300px" height="400px" />
    <RayLiquid :option="option3" width="300px" height="400px" />
  </div>
</template>

<script setup>
const option1 = ref({
  series: [{ data: [{ value: 0.6, name: '任务A' }], radius: 6 }]
})
const option2 = ref({
  series: [{ data: [{ value: 0.8, name: '任务B' }], radius: 6 }]
})
const option3 = ref({
  series: [{ data: [{ value: 0.45, name: '任务C' }], radius: 6 }]
})
</script>

组件属性 ​

属性类型默认值说明
optionRayChartOption-图表配置对象（必填）
widthstring | number'100%'图表宽度
heightstring | number'600px'图表高度

相关文档 ​