RayChart

Appearance

柱状图 ​

3D 柱状图展示分类数据对比，通过立体柱形高度直观呈现数值大小。

快速开始 ​

最简单的柱状图只需提供数据，光照、颜色等自动配置：

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

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

const chartOption = ref({
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130]
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

智能默认值

自动配置光照、颜色和材质，无需手动设置即可获得出色效果。

核心配置 ​

数据配置 ​

属性类型默认值说明
series.datanumber[]-柱状图数据（必填）
xAxis3D.datastring[]-X 轴类别数据

样式配置 ​

属性类型默认值说明
series.barWidthnumber自动计算柱子宽度
series.barDepthnumber1.5柱子深度
series.colorstring[]自动分配柱子颜色
材质配置（进阶）

通过 itemStyle 配置柱子的材质效果：

javascript
itemStyle: {
  metalness: 0.3,          // 金属度 (0-1)
  roughness: 0.5,          // 粗糙度 (0-1)
  emissive: '#000000',     // 自发光颜色
  emissiveIntensity: 0.0   // 自发光强度
}

详见 材质系统

标签配置（可选）
javascript
label: {
  show: true,
  fontSize: 12,
  color: '#333',
  formatter: '{c}'  // 标签格式化
}

常见场景 ​

多系列对比 ​

对比不同系列数据，颜色自动分配：

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

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

const chartOption = ref({
  series: [
    { name: '2023', data: [120, 200, 150, 80, 70, 110, 130] },
    { name: '2024', data: [150, 230, 180, 90, 85, 120, 140] }
  ],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

堆叠柱状图 ​

通过 stack 属性实现数据堆叠：

vue
<script setup>
const chartOption = ref({
  series: [
    { name: '产品A', data: [120, 200, 150, 80, 70, 110, 130], stack: 'total' },
    { name: '产品B', data: [30, 50, 40, 20, 15, 30, 35], stack: 'total' }
  ],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
})
</script>

自定义样式 ​

需要精细控制时，自定义颜色和材质：

vue
<script setup>
const chartOption = ref({
  series: [{
    name: '销售额',
    data: [120, 200, 150, 80, 70, 110, 130],
    color: ['#42b883'],
    barWidth: 1.5,
    barDepth: 1.5,
    itemStyle: {
      metalness: 0.3,
      roughness: 0.5
    }
  }],
  xAxis3D: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis3D: {
    name: '销售额'
  }
})
</script>

组件属性 ​

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

相关文档 ​