Appearance
仪表盘
3D 仪表盘通过指针和刻度展示单个数值指标，适用于进度、速度、完成率等场景。
快速开始
最简单的仪表盘只需提供数值和名称：
vue
<template>
<RayGauge :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayGauge } from 'raychart';
const chartOption = ref({
series: [
{
data: [{ value: 75, name: '完成率' }],
},
],
});
</script>智能默认值
自动配置指针、刻度线、颜色区间和光照，默认 0-100 范围的仪表盘。
核心配置
数据配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.data | Array<{value: number, name: string}> | - | 仪表盘数据（必填） |
series.min | number | 0 | 最小值 |
series.max | number | 100 | 最大值 |
样式配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
series.radius | number | 10 | 仪表盘半径 |
series.startAngle | number | 225 | 起始角度（度） |
series.endAngle | number | -45 | 结束角度（度） |
series.splitNumber | number | 10 | 刻度数量 |
指针配置（可选）
通过 series.pointer 配置指针样式：
javascript
pointer: {
length: 6, // 指针长度（默认 radius * 0.65）
width: 0.15, // 指针宽度（默认 0.12）
color: '#3498db' // 指针颜色（默认 '#e74c3c'）
}刻度线配置（可选）
通过 series.axisTick 控制刻度线显隐（主刻度 + 次刻度样式为内置设计，不支持自定义）：
javascript
axisTick: {
show: false // 隐藏刻度线（默认 true）
}刻度标签配置（可选）
通过 series.axisLabel 配置刻度标签样式：
javascript
axisLabel: {
show: true, // 显示标签（默认 true）
fontSize: 12, // 字体大小（默认 11）
color: '#888', // 字体颜色（默认 '#555555'）
formatter: '{value}' // 标签格式化，{value} 会被替换为刻度值
}轴线颜色区间（进阶）
通过 series.axisLine.lineStyle.color 配置分段颜色：
javascript
axisLine: {
lineStyle: {
color: [
[0.33, '#91cc75'], // 0-33% 绿色
[0.66, '#fac858'], // 33-66% 黄色
[1, '#ee6666'] // 66-100% 红色
]
}
}数组格式为 [比例, 颜色]，比例范围 0-1。
常见场景
基础仪表盘
展示单个进度值，使用默认配置：
vue
<template>
<RayGauge :option="chartOption" />
</template>
<script setup>
import { ref } from 'vue';
import { RayGauge } from 'raychart';
const chartOption = ref({
series: [
{
data: [{ value: 75, name: '完成率' }],
detail: {
show: true,
formatter: '{value}%', // 显示百分比
},
},
],
});
</script>半圆仪表盘
通过调整起始和结束角度实现半圆效果：
vue
<script setup>
const chartOption = ref({
series: [
{
data: [{ value: 80, name: '速度' }],
startAngle: 180, // 从 180 度开始
endAngle: 0, // 到 0 度结束
radius: 10,
pointer: {
length: 6,
width: 0.15,
color: '#3498db',
},
},
],
});
</script>自定义颜色区间
根据数值区间设置不同颜色：
vue
<script setup>
const chartOption = ref({
series: [
{
data: [{ value: 150, name: '速度' }],
min: 0,
max: 200,
radius: 10,
axisLine: {
lineStyle: {
color: [
[0.25, '#7CFFB2'], // 0-50 绿色
[0.5, '#58D9F9'], // 50-100 青色
[0.75, '#FDDD60'], // 100-150 黄色
[1, '#FF6E76'], // 150-200 红色
],
},
},
detail: {
show: true,
formatter: '{value} km/h',
},
},
],
});
</script>隐藏标题或数值
title 和 detail 都只支持 show 开关（标题仅在数据带 name 时显示）：
vue
<script setup>
const chartOption = ref({
series: [
{
data: [{ value: 65, name: '温度' }],
title: { show: false }, // 隐藏标题
detail: { show: false }, // 隐藏数值
},
],
});
</script>组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
option | RayChartOption | - | 图表配置对象（必填） |
width | string | number | '100%' | 图表宽度 |
height | string | number | '600px' | 图表高度 |