形状、路径与图表

原生绘图组件可以组成表盘、刻度、进度条和曲线。它们使用逻辑点坐标，角度单位为度，0° 向右、正方向顺时针。

基础形状

组件	几何属性	常见用途
Rectangle	width、height、radius / cornerRadius	进度条、色块、圆角块
Circle	width、height	等宽高时为圆；用于圆环与状态点
Ellipse	width、height	椭圆形装饰或刻度
Line	x1、y1、x2、y2	刻度、基线、指针
Arc	startAngle、sweepAngle、progress	弧线进度与表盘
Path	commands	多段线、曲线和自定义闭合形状
Polyline	points、closed	数据折线、简单多边形

填充和描边

属性	说明
fill	填充色；只需要描边时设 "clear"
stroke	描边色
lineWidth	描边宽度
lineCap	butt、round、square
lineJoin	miter、round、bevel
dash / dashPhase	虚线长度数组与起始偏移
trimStart / trimEnd	显示路径的相对起止段

<Circle width={120} height={120} fill="clear" stroke={$env.accent} lineWidth={6}/>
<Line width={200} height={40} x1={0} y1={20} x2={200} y2={20}
  stroke={$env.foreground} lineWidth={1} dash={[3, 5]}/>

Arc 弧线进度

<Arc width={160} height={160} startAngle={135} sweepAngle={270}
  progress={0.65} fill="clear" stroke={$env.accent}
  lineWidth={8} lineCap="round"/>

progress 表示弧线显示比例。用于速度时，先把速度除以你选择的显示上限，再限制到 0…1。弧线的包围框会受到描边宽度影响，边缘应留出空间。

Ring 是兼容保留的环形组件；新的自由表盘也可以用两条 Arc 分别绘制底轨与当前进度。

Polyline 折线

<Polyline width={180} height={80}
  points={[[0, 60], [40, 35], [80, 45], [120, 20], [180, 10]]}
  fill="clear" stroke={$env.accent} lineWidth={2} lineJoin="round"/>

点坐标属于该组件自己的区域。closed={true} 会闭合路径。缺测曲线应分段绘制，不要把缺测段两端直接连接成真实测量。

Path 命令

commands 是命令对象数组，不是 SVG 的 d 字符串。

op	字段	含义
move	x、y	移动起点
line	x、y	直线到目标
quad	x、y、cx、cy	二次曲线，cx/cy 为控制点
cubic	x、y、c1x/c1y、c2x/c2y	三次曲线
arc	x、y、radius、startAngle、endAngle、clockwise	圆弧，x/y 为圆心
close	无	闭合当前子路径

<Path width={100} height={80} fill={$env.accent} commands={[
  {op: 'move', x: 50, y: 0},
  {op: 'line', x: 100, y: 80},
  {op: 'line', x: 0, y: 80},
  {op: 'close'}
]}/>

填充规则可设置为 fillRule="nonZero" 或 "evenOdd"；有洞的组合路径可使用偶奇规则。

简单图表组件

LineChart、BarChart 接收 values、可选 labels、min、max、color、gridColor 等属性；LineChart 还使用 lineWidth，柱状图可通过 gap 调节柱间距。

<BarChart width={200} height={80} values={[10, 18, 12, 30, 24]}
  min={0} max={40} color={$env.accent} gridColor="#80808033" gap={5}/>

需要真实时间轴、缺测分段或自定义刻度时，使用 Polyline 和基础形状组合会更明确，见速度历史曲线。