TMUI4x

主题

TMUI4x2026-05-27
334
1.4m

仪表盘图 Gauge ​

以百分比进度展示的仪表盘，支持渐变进度弧、指针、刻度、中心文字与格式化数值。

效果 ​

在线预览
在线模拟尺寸:

基本用法 ​

仪表盘不依赖 data，主要通过 series[0].percent 指定进度（0~1）。

typescript
{
  data: [] as UTSJSONObject[],
  series: [{
    type: 'gauge',
    percent: 0.72,
    pieCenterText: 'SCORE',
    gaugeTickCount: 10
  }]
}

渐变进度弧 ​

typescript
series: [{
  type: 'gauge',
  percent: 0.72,
  gaugePointerColor: '#33f6a2',
  gaugeProgressColor: '#3b82f6',
  gradient: ['#33f6a2', '#3696f6']
}]

半圆仪表盘 ​

typescript
series: [{
  type: 'gauge',
  percent: 0.65,
  gaugeStartAngle: -180,
  gaugeEndAngle: 0,
  gaugePointerColor: '#ef4444',
  gaugeProgressColor: '#ef4444',
  gaugeTickCount: 10
}]

中心数值与格式化 ​

label 仅控制中心的数值显示，不影响刻度与 pieCenterText / pieCenterSubText。

typescript
series: [{
  type: 'gauge',
  percent: 0.65,
  pieCenterText: '健康度',
  pieCenterSubText: '一般',
  label: {
    show: true,
    formatter: '温度：{value}'
  }
}]

label.formatter 占位：

  • {name}：pieCenterText
  • {value}：0~100 的整数
  • {percent}：带一位小数的百分比字符串（如 65.0%）

系列配置项 ​

属性类型默认值说明
typestring-固定 'gauge'
percentnumber0.5进度 0~1
gaugeStartAnglenumber-210起始角度（度）
gaugeEndAnglenumber30结束角度（度）
gaugeTickCountnumber10主刻度数量
gaugePointerColorstring自动指针颜色
gaugeTrackColorstring自动轨道颜色
gaugeProgressColorstring自动进度弧颜色（与 gradient 二选一，gradient 优先）
gradientstring[]-进度弧渐变色数组（支持首项 'to right'/'to bottom' 指定方向）
pieCenterTextstring''中心主文字
pieCenterSubTextstring''中心副标题
labelChartLabelOptions-中心数值标签配置（show/color/fontSize/formatter）
最近更新