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.data | number[] | - | 柱状图数据（必填） |
xAxis3D.data | string[] | - | X 轴类别数据 |
样式配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.barWidth | number | string | 步长 × 0.8 | 柱子宽度，支持数字或 '50%' 百分比（相对步长） |
series.barDepth | number | string | 1.5 | 柱子深度，支持数字或 '50%' 百分比（相对网格深度） |
series.color | string[] | 自动分配 | 柱子颜色，按索引轮转 |
series.label | object | 不显示 | 柱顶标签，如 { show: true, fontSize: 12, color: '#333', formatter: '{c}' } |
series.animation | boolean | true | 首次渲染是否播放生长动画 |
series.animationDuration | number | 800 | 动画时长（ms） |
交互配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
controlSettings.enableRotate | boolean | true | 启用旋转 |
controlSettings.enableZoom | boolean | true | 启用缩放 |
controlSettings.enablePan | boolean | true | 启用平移 |
材质配置（进阶）
通过 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}' // 标签格式化
}常见场景
多色柱状图
柱状图当前只渲染 series 中的第一个系列，需要区分不同数据时，通过 color 数组（按索引轮转）或单个数据项的 itemStyle.color 指定颜色：
vue
<template>
<RayBar :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue'
import { RayBar } from 'raychart'
const chartOption = ref({
series: [{
name: '2024',
data: [
{ value: 120, itemStyle: { color: '#42b883' } },
{ value: 200, itemStyle: { color: '#5470c6' } },
{ value: 150, itemStyle: { color: '#fac858' } },
{ value: 80, itemStyle: { color: '#ee6666' } },
{ value: 70, itemStyle: { color: '#73c0de' } },
{ value: 110, itemStyle: { color: '#3ba272' } },
{ value: 130, itemStyle: { color: '#fc8452' } }
]
}],
xAxis3D: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
})
</script>多系列支持
RayBar 的柱状图只渲染 series[0]，暂不支持多系列并列或堆叠；需要并列/堆叠效果时，可把多组数据合并为单系列（如拼接数据并用 color 区分）。
自定义样式
需要精细控制时，自定义颜色和材质：
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>组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
option | RayChartOption | - | 图表配置对象（必填） |
width | string | number | '100%' | 图表宽度 |
height | string | number | '600px' | 图表高度 |