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: '搜索引擎' }
    ],
    depth: 2
  }]
})
</script>

核心配置 ​

属性类型默认值说明
depthnumber2扇区厚度（饼图高度）
depthByValuebooleanfalse扇区厚度是否随数值变化
innerRadiusnumber0内半径，大于 0 时变为环形图
startAnglenumber0起始角度（弧度）
roseType'radius' | 'area' | falsefalse南丁格尔图：'radius' 半径与数值成正比，'area' 面积与数值成正比
label.position'inside' | 'outside''inside'标签位置，'outside' 时自动生成引导线

数据格式

饼图数据需包含 value 和 name 字段，框架自动计算百分比。外半径固定为 10，不可配置。

常见场景 ​

南丁格尔图 ​

通过 roseType 属性将饼图转换为南丁格尔图（玫瑰图），'radius' 让扇区半径与数值成正比：

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' }
    ],
    depth: 2,
    roseType: 'radius'  // 启用南丁格尔图；'area' 则面积与数值成正比
  }]
})
</script>

环形图 ​

通过 innerRadius 将饼图变为环形图：

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

自定义样式 ​

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

组件属性 ​

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

相关文档 ​

基础学习 ​

进阶主题 ​

API 参考 ​

其他图表类型 ​

在线示例 ​