Appearance
3D 面积图
3D 面积图在三维空间中展示数据趋势和面积填充效果，通过多个系列在 Z 轴方向排列，直观展示数据变化趋势，适用于销售趋势、数据波动、多维度趋势分析等场景。
快速开始
最简单的 3D 面积图需要配置 X 轴和多个系列数据：
vue
<template>
<RayArea3D :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayArea3D } from 'raychart';
const chartOption = ref({
xAxis3D: {
data: ['周一', '周二', '周三', '周四', '周五'],
name: '星期',
},
yAxis3D: {
name: '分数',
},
series: [
{
type: 'area3D',
name: '数学',
data: [85, 92, 78, 95, 88],
color: ['#667eea'],
},
{
type: 'area3D',
name: '语文',
data: [78, 85, 82, 88, 75],
color: ['#f093fb'],
},
],
});
</script>智能默认值
自动配置面积填充透明度、标签位置、四点光照系统和 Z 轴系列间隔。
核心配置
坐标轴配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
xAxis3D.data | string[] | - | X 轴数据（必填） |
xAxis3D.name | string | - | X 轴名称 |
yAxis3D.name | string | - | Y 轴名称（数值轴） |
多系列排列
每个系列会在 Z 轴方向自动排列，无需手动配置 zAxis3D。系列顺序决定 Z 轴位置。
数据配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.data | number[] | - | 系列数据（必填） |
series.name | string | - | 系列名称 |
series.color | string[] | - | 系列颜色 |
面积样式配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.areaStyle.opacity | number | 0.65 | 面积填充透明度（0-1） |
标签配置（可选）
通过 series.label 配置数据点标签（标签固定显示在数据点上方）：
javascript
label: {
show: true, // 显示标签
formatter: '{value}', // 文本格式化（支持 {value} / {name}）
distance: 0.3, // 标签与数据点的距离（默认 0.3）
fontSize: 11, // 字体大小
color: '#333', // 字体颜色
fontWeight: '600' // 字体粗细
}网格配置（可选）
通过 grid3D 配置三维空间尺寸：
javascript
grid3D: {
show: true, // 显示网格边框
boxWidth: 20, // 宽度
boxDepth: 20, // 深度
boxHeight: 10 // 高度
}常见场景
基础 3D 面积图
展示考试成绩趋势：
vue
<template>
<RayArea3D :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayArea3D } from 'raychart';
const chartOption = ref({
xAxis3D: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
name: '星期',
},
yAxis3D: {
name: '分数',
},
series: [
{
type: 'area3D',
name: '数学',
data: [85, 92, 78, 95, 88, 72, 90],
color: ['#667eea'],
areaStyle: { opacity: 0.65 },
label: {
show: true,
fontSize: 11,
color: '#333',
},
},
{
type: 'area3D',
name: '语文',
data: [78, 85, 82, 88, 75, 80, 86],
color: ['#f093fb'],
areaStyle: { opacity: 0.65 },
},
{
type: 'area3D',
name: '英语',
data: [72, 80, 88, 76, 84, 90, 82],
color: ['#4facfe'],
areaStyle: { opacity: 0.65 },
},
],
});
</script>多城市销售趋势
展示多个城市的月度销售趋势：
vue
<script setup>
const chartOption = ref({
xAxis3D: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
name: '月份',
},
yAxis3D: {
name: '销售额（万元）',
},
series: [
{
type: 'area3D',
name: '北京',
data: [120, 145, 160, 180, 155, 190, 210, 200],
color: ['#5470c6'],
areaStyle: { opacity: 0.7 }, // 增加透明度
label: {
show: true,
fontSize: 10,
},
},
{
type: 'area3D',
name: '上海',
data: [100, 130, 150, 170, 145, 175, 195, 185],
color: ['#91cc75'],
areaStyle: { opacity: 0.7 },
label: {
show: true,
fontSize: 10,
},
},
{
type: 'area3D',
name: '广州',
data: [90, 110, 135, 155, 130, 160, 180, 170],
color: ['#fac858'],
areaStyle: { opacity: 0.7 },
label: {
show: true,
fontSize: 10,
},
},
],
});
</script>波浪面积图
使用渐变色展示数据波动：
vue
<script setup>
const chartOption = ref({
xAxis3D: {
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
name: '月份',
},
yAxis3D: {
name: '数值',
},
series: [
{
type: 'area3D',
name: 'Series A',
data: [30, 80, 50, 90, 40, 70],
color: ['#4facfe'], // 蓝色渐变
areaStyle: { opacity: 0.6 },
},
{
type: 'area3D',
name: 'Series B',
data: [60, 40, 85, 35, 75, 55],
color: ['#f093fb'], // 粉色渐变
areaStyle: { opacity: 0.6 },
},
{
type: 'area3D',
name: 'Series C',
data: [45, 65, 30, 70, 55, 80],
color: ['#43e97b'], // 绿色渐变
areaStyle: { opacity: 0.6 },
},
],
});
</script>自定义网格空间
通过 grid3D 配置三维空间尺寸：
vue
<script setup>
const chartOption = ref({
grid3D: {
show: true, // 显示网格边框
boxWidth: 25, // 增大宽度
boxDepth: 25, // 增大深度
boxHeight: 12, // 增大高度
},
xAxis3D: {
data: ['Q1', 'Q2', 'Q3', 'Q4'],
name: '季度',
},
yAxis3D: {
name: '营收（亿元）',
},
series: [
{
type: 'area3D',
name: '产品A',
data: [120, 150, 180, 200],
color: ['#5470c6'],
areaStyle: { opacity: 0.7 },
},
{
type: 'area3D',
name: '产品B',
data: [100, 130, 160, 190],
color: ['#91cc75'],
areaStyle: { opacity: 0.7 },
},
],
});
</script>组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
option | RayChartOption | - | 图表配置对象（必填） |
width | string | number | '100%' | 图表宽度 |
height | string | number | '600px' | 图表高度 |