OAS-UI

Chart 图表 ​

自研 SVG 图表组件（零第三方图表引擎），支持折线 / 柱状 / 饼图 / 面积 / 环形 / 堆叠柱状 / 雷达 / 极坐标面积八型，外加系列级组合图与双轴。数据更新自动重绘，prefers-reduced-motion 时关闭动画。

折线图 ​

折线图（默认）

默认 type="line"。数组数据 [{label, value}] 为单系列；悬停数据点可查看数值（原生 <title>）。

柱状图 ​

柱状图

type="bar" 渲染分组柱状。

饼图 ​

饼图

type="pie" 渲染扇区，tooltip 显示占比。

环形图 ​

环形图

type="donut" 与饼图同数据格式，中间镂空成环带，tooltip 同样显示占比。

面积图 ​

面积图（smooth + 图例）

type="area" 在折线基础上向基线填充半透明区域（多系列叠加时仍可读），支持 options.smooth 平滑曲线。

面积图（渐变填充）

options.gradient（默认 false）开启后，面积填充从曲线处的系列色向基线垂直渐淡（顶部 35% 不透明度、底部透明），视觉重心聚焦数据线。

堆叠柱状图 ​

堆叠柱状图

type="stacked-bar" 多系列自底向上堆叠为单柱，柱高 = 分类合计，y 轴刻度按合计值计算。

雷达图 ​

雷达图（radarShape + max 量程）

type="radar" 的维度名复用 labels（与折线/柱状同一数据心智，零迁移成本）。options.max 设全局统一量程（缺省取全系列 max 走 nice 刻度）；options.radarShape（默认 polygon 同心多边形）设为 circle 换同心圆网格。悬停顶点显示「维度： 值」，图例/配色与其他图型一致。

极坐标面积图 ​

极坐标面积图（玫瑰图）

type="polar-area" 每分类等角扇区、半径编码数值（最大值满半径），同心参考圈提供径向量级读数。与饼图的「份额」心智不同，tooltip 显示原始数值而非占比。单系列取 series[0]（与饼图/环图同一数据格式）。

组合图 ​

组合图（柱 + 线系列级混排）

组合图不设独立 type 值：顶层 type 作为缺省系列型，series[].type（bar / line / area）逐系列覆盖，缺省/非法值回退顶层型。共享同一分类轴，线/面积点对齐柱组中心（与纯折线的端点对齐不同）；绘制层序固定 bar → area → line；配色与图例按系列声明顺序。

双轴图 ​

双轴组合图（右轴 + alignTicks 刻度对齐）

双轴是坐标系配置不是图型：options.yAxis 数组第 2 项存在且左右两侧均有 series[].yAxisIndex 绑定系列时启用右轴（name 为轴名，渲染在轴顶；缺任一侧按单轴渲染，不渲染空轴），series[].yAxisIndex（0 左默认 / 1 右）绑定归属；可与 line / bar / 组合图任意叠加。双轴时刻度强制对齐（alignTicks）：副轴以主轴档数为锚重算 nice 刻度，左右刻度线一一水平对齐，消除刻度错位误读——但两轴单位不同，同一条线上的左右读数不可横比。堆叠柱状/饼系/雷达类忽略 yAxis（单轴语义）。

多系列 + 图例 ​

多系列折线（smooth + 图例）

对象格式 {labels, series:[{name, data}]} 支持多系列；多系列时默认显示图例，options.smooth 开启平滑曲线。

密集分类（标签自动抽稀 / 旋转） ​

36 天日请求量（缺省：水平抽稀）

同一份数据 · xLabelRotate: 90（竖排，可显示的标签更多）

同一份 36 天数据两种排法的取舍：

  • 缺省（水平 + 抽稀）：间距不足以容下最宽标签时，按「标签宽 + 间隙」与分类间距求出步长 k，每 k 个渲染一个（autoSkip 口径），端点在有富余时保留。水平读最快，但会跳号（上面 36 天显示 12 个）。
  • xLabelRotate（斜排/竖排）：0–90 度，缺省 0；>0 时标签绕刻度锚点顺时针旋转——列首贴刻度、向右下倾斜（90° 即竖排）。旋转后横向投影变小（角度 θ 时 ≈ 标签宽×cosθ + 行高×sinθ；90° 仅剩一个行高），能容纳的标签更多：上面 36 天在 90° 下显示 18 个（约缺省的 1.5 倍），标签更长时收益更大。
  • 两者可组合：xLabelRotate 只给角度，抽稀负责保底——旋转后仍按投影宽度求步长，间距不够就继续跳号，永不叠字。短标签（如 09-01）斜排 45° 的横向投影仍有约 0.7 倍宽，收益有限；45° 主要利好长标签（如 2026-09-01）。
  • 代价：旋转抬高绘图区——底留白 = 10 + 最宽标签×sinθ + 行高（90° 按标签宽算），右留白至少容下最右标签的横向投影；绘图区变矮、纵轴可读档数变少。非数字角度按 0，超范围夹到 0–90。

空数据 ​

空数据占位

无数据 / 非法 JSON 显示空态占位，不报错。

数据通道契约 ​

data / options 双通道传值：

  • attribute 通道：HTML 上写 JSON 字符串（如 data='[{...}]'），组件内部 JSON.parse 解析。
  • property 通道：JS 直接赋对象/数组（el.data = [{...}]），免序列化；属性通道的解析在 setter 内完成，优先级高于 attribute。

反射行为差异（读取数据的方式两组件不统一，请按下面约定）：

  • oas-table 的 columns / data setter 会把值反射回 attribute——property 赋值后 getAttribute('columns') / getAttribute('data') 可读回对应的 JSON 字符串（attribute 与 property 保持单一数据源同步）。
  • oas-chart 的 data（及 options）setter 只写内部状态、不反射——property 赋值后 attribute 仍是旧值/空值，读取走 el.data property（getter 返回最近一次赋值的解析结果），不要用 getAttribute('data') 回读。

例外：oas-table 的 columns 若含函数字段（render 等，JSON 序列化会丢），setter 走纯内存路径不反射——此类列的读取请走 el.columns property。

API ​

oas-chart ​

属性 ​

属性说明类型默认值
aria-label图表描述（缺省按类型走 locale）——
data数据。数组单系列 [{label, value}] 或对象多系列 {labels, series:[{name, data, type?, yAxisIndex?}]}（系列级 type / yAxisIndex 用于组合图与双轴）unknown—
options配置：smooth（平滑）、colors（系列配色）、showLegend、gradient（面积图垂直渐变填充，默认 false）、max（radar 全局量程）、radarShape（radar 网格 polygon/circle，默认 polygon）、xLabelRotate（x 轴分类标签旋转角度 0–90，默认 0 = 水平 + 按宽度自动抽稀；>0 斜排/竖排，仍按旋转后投影抽稀兜底）、yAxis（双轴数组，第 2 项存在且两侧均有 yAxisIndex 绑定系列才启用双轴，缺侧按单轴）unknown—
type图表类型：line / bar / pie / area / donut / stacked-bar / radar / polar-area（组合图不设 type 值，用系列级 series.type 覆盖）ChartTypeline

data / options 也支持 property 通道（JS 对象，优先级高于 attribute）。

边界 ​

  • 数据更新重绘 SVG（同 qrcode 模式），节点不重建
  • 空/非法数据 → 空态占位
  • 每个数据点带原生 <title> tooltip，零孤儿浮层
  • x 轴分类标签密集（间距不足以容下最宽标签）时按可用宽度自动抽稀，端点有富余则保留；抽稀只作用于标签（数据点不抽稀），不旋转/不加省略号——需要斜排/竖排时用 options.xLabelRotate（0–90），旋转后仍按投影宽度抽稀兜底
  • 动画为纯 CSS（@media (prefers-reduced-motion: no-preference) 包裹），reduced-motion 下自动关闭，无 JS 计时器
  • radar 维度量程为全局统一（options.max 或 nice 刻度），暂不支持逐维独立量程——需要时宿主可先自行归一化（如 0-100 分制）
  • polar-area 值全为 0 时不渲染扇区（与饼图同口径）；半径量程为最大值满半径
  • 组合图只允许 bar / line / area 三型互混（同一直角坐标系），其他类型值静默回退顶层型
  • 系列级 type / yAxisIndex 只被直角坐标系图型（line / bar / area / 组合图）消费；stacked-bar / pie / donut / radar / polar-area 忽略系列级覆盖，一律按顶层 type 渲染
  • 仅声明 options.yAxis 第 2 项而绑定未覆盖两侧（无右绑、或全部系列绑右致左轴空置）时按单轴渲染——不渲染 0 刻度假轴（未用轴名同免）
  • y 轴刻度步长恒为整数（nice 上取整，最小步长 1）：小数量程（如 0~0.01、不足 4 段的量程）会退化为整步刻度、量程顶被抬到整步倍数而数据贴近底部——小量程数据建议宿主先做单位换算（如 ×100 转百分比）
  • 配色映射语义：饼系（pie / donut / polar-area）按分类上色，直角系（line / bar / area / stacked-bar / radar / 组合图）按系列上色；options.colors 按同序覆盖
  • 图表 svg 内文字方向钉死 direction: ltr（坐标语义与书写方向正交）：宿主 dir=rtl 不翻转文字锚点、不镜像几何

基于 MIT OR Apache-2.0 双许可发布

Copyright © 2026-present OpenAppSys, https://oas-ui.dev