ICEN UI

缩放 / 刷选

spec.zoom（line/area/vbar）：在 plot 区按下拖出选区（半透明 rect，--icen-token-accent 10% 填充），松开后按选区像素→类目索引映射切片重渲并派 icen:chart-zoom { chart, from, to }（类目索引区间含端点）。

在图上按住拖选一段 → 切片重渲并派 icen:chart-zoom · 点「重置缩放」chip 或双击 plot 复原 · 拖距 <5px 仍是点击

事件日志：等待拖选…

html
<p class="demo-label" style="margin:0 0 10px">在图上按住拖选一段 → 切片重渲并派 icen:chart-zoom · 点「重置缩放」chip 或双击 plot 复原 · 拖距 &lt;5px 仍是点击</p><div class="icen-chart" id="demo-charts-zoom" style="border:1px solid var(--icen-token-line-soft);border-radius:var(--icen-radius-md);padding:12px"></div><p class="demo-label" id="charts-zoom-log" style="margin-top:8px">事件日志：等待拖选…</p>
行为与接口说明

spec.zoom（line/area/vbar）：在 plot 区按下拖出选区（半透明 rect，--icen-token-accent 10% 填充），松开后按选区像素→类目索引映射切片重渲并派 icen:chart-zoom { chart, from, to }（类目索引区间含端点）。缩放态头部行出现「重置缩放」chip，双击 plot 也复原；位移 <5px 视为点击（tooltip/图例/事件照常）；update 重渲 labels 未变时保留缩放窗，append 时窗口跟随尾部。'x' 横向拖选，'brush' 自由框选（仍按类目索引区间切片）。

安装

bun add @icen.ai/ui

用法

js
const handle = renderChart(el, {  type: 'line', labels, values,  zoom: 'x',                   // 'x' 横向拖选 | 'brush' 自由框选});el.addEventListener('icen:chart-zoom', (e) => {  const { chart, from, to } = e.detail;   // 类目索引区间（含端点）  fetchRange(from, to).then((detail) => handle.update({ type: 'line', labels, values: detail, zoom: 'x' }));});/* 复原：头部「重置缩放」chip / 双击 plot / 选满全量（update 时 labels 未变窗口保留） */