RayChart

Appearance

饼图 ​

3D 饼图展示数据占比关系，通过立体扇形大小直观呈现各部分比例。

快速开始 ​

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

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

const chartOption = ref({
  series: [{
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    radius: 5,
    height: 2
  }]
})
</script>

核心配置 ​

属性类型默认值说明
radiusnumber5饼图半径
heightnumber2饼图高度（厚度）
roseTypebooleanfalse是否显示为南丁格尔图

数据格式

饼图数据需包含 value 和 name 字段，框架自动计算百分比。

常见场景 ​

南丁格尔图 ​

通过 roseType 属性将饼图转换为南丁格尔图（玫瑰图）：

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' }
    ],
    radius: 5,
    height: 2,
    roseType: true  // 启用南丁格尔图
  }]
})
</script>

自定义样式 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' }
    ],
    radius: 6,
    height: 3,
    itemStyle: {
      metalness: 0.3,
      roughness: 0.5
    }
  }]
})
</script>

组件属性 ​

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

相关文档 ​