X-Next

Appearance

TrendChart 迷你趋势图 ​

用于展示小型趋势、指标变化和概览图表。组件默认渲染为 100% 宽 × 60px 高的迷你图，适合放在仪表盘卡片、表格单元格和指标标签中。

与其它图表的分工 ​

TrendChart 是迷你图：无坐标轴、无图例、单条曲线，用于卡片角落的形态提示。需要坐标轴读数或多系列对比时用 LineChart 折线图；完整的选择指引见图表总览。

基础用法 ​

vue
<template>
  <x-trend-chart :dataset="dataset" status="success" />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

不设置 height 时组件使用 60px 默认高度，无需外部容器样式。

尺寸与权重 ​

迷你图的推荐高度是 40 ~ 60px。高度超过 80px 后曲线会显得空旷，观感更接近「一条没有坐标轴的大图」而不是角标趋势；这种场景应该改用 LineChart 折线图。

vue
<template>
  <x-trend-chart :dataset="dataset" :height="40" />
  <x-trend-chart :dataset="dataset" :height="60" />
  <x-trend-chart :dataset="dataset" :height="80" />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

height 与 width 接受数字（按 px 处理）或 CSS 值。数字宽度下组件不再撑满父容器，适合固定尺寸的卡片角标。

卡片场景 ​

迷你图的实际用法是在指标卡里当角标：卡片给数值，图表给形态。下面的例子把宽度收到 120px 左右，与数值并排。

今日请求量
12,480
平均延迟
218 ms
vue
<template>
  <div class="metric-card">
    <div>
      <div class="metric-card-label">今日请求量</div>
      <div class="metric-card-value">12,480</div>
    </div>
    <x-trend-chart :dataset="dataset" status="success" :height="40" :width="120" />
  </div>
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

<style scoped>
.metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 280px;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--x-color-border-subtle);
  border-radius: 8px;
}
.metric-card-value {
  font-size: 20px;
  font-weight: 500;
}
.metric-card-label {
  color: var(--x-color-text-3);
  font-size: 12px;
}
</style>

状态主题 ​

vue
<template>
  <x-trend-chart :dataset="dataset" status="primary" :height="56" />
  <x-trend-chart :dataset="dataset" status="warning" :height="56" />
  <x-trend-chart :dataset="dataset" status="danger" :height="56" />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

不传 status 时使用主色；info 为中性次要指标语义，适合同一卡片里弱化的对比项。

曲线与填充 ​

vue
<template>
  <x-trend-chart :dataset="dataset" :smooth="false" :height="56" />
  <x-trend-chart :dataset="dataset" :fill="false" :height="56" />
  <x-trend-chart :dataset="dataset" :stroke="false" :height="56" />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

填充默认使用由描边色到透明的渐变；需要纯色块时通过 theme.fill.type="solid" 切换。

数据点显示 ​

vue
<template>
  <!-- 默认 auto：点距不足时自动隐藏普通点；show-points 强制常显 -->
  <div class="chart-320">
    <x-trend-chart :dataset="denseDataset" :height="80" />
  </div>
  <div class="chart-320">
    <x-trend-chart :dataset="denseDataset" show-points :height="80" />
  </div>
  <div class="chart-320">
    <x-trend-chart :dataset="dataset" :show-points="false" :height="80" />
  </div>
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
const denseDataset = [
  12, 18, 14, 24, 32, 28, 36, 42, 30, 22, 26, 34,
  18, 26, 22, 30, 38, 34, 40, 46, 36, 28, 32, 44,
];
/* 延迟趋势：整体平稳、尾部抬头，用于卡片示例 */
const latencyDataset = [196, 205, 188, 214, 202, 221, 208, 236];
</script>

<style scoped>
.chart-320 {
  width: 320px;
  max-width: 100%;
}
</style>

show-points 为 auto（默认）时，相邻点横向间距小于 18px 就自动隐藏普通点，避免小尺寸下点挤成一团；true 强制常显（点数多且空间窄时会显得拥挤，如上方第二例），false 完全隐藏。hover 时激活点始终可见。

纯形态，不带坐标轴 ​

TrendChart 的 grid 与 labels 已废弃（1.8.0 起不渲染任何内容，props 声明保留到 2.0.0 移除）。这是有意的：带网格和坐标文字的图属于 LineChart 折线图，那里有类目轴、数值轴、多系列、图例和悬浮读数。

迷你图的职责只有一个——让用户一眼看出「在涨还是在跌、有没有异常尖峰」。加上坐标轴后，40~60px 的高度里曲线会被压扁，而标签又读不清，反而不如直接用折线图。

需要读数时：用 LineChart；想在这个尺寸下看具体数值，开 tooltip 悬浮即可（提示气泡会贴边收敛，不会被裁）。

交互事件 ​

等待鼠标移动
vue
<template>
  <x-trend-chart
    :dataset="dataset"
    interactive
    tooltip
    :height="120"
    :tooltip-formatter="formatVolume"
    @mouse-move="handleMouseMove"
  />
  <p>{{ hoverInfo }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
const hoverInfo = ref('等待鼠标移动');
// tooltip 文本格式化函数放在 script 中，避免模板内联类型注解
const formatVolume = (value: number) => `${value} 单`;
const handleMouseMove = (event: { index: number; data: number } | null) => {
  hoverInfo.value = event ? `index: ${event.index}, value: ${event.data}` : '已离开';
};
</script>

tooltip 开启后 hover 会在激活点旁显示 tooltipFormatter 的返回值，无需业务自己画提示层；激活竖线只从当前数据点连到绘图区底部，不会穿过整张图表；mouse-move 在数据变化导致激活点越界时会补发 null，业务侧不用额外兜底。

数值区间 ​

vue
<template>
  <x-trend-chart :dataset="dataset" :min="20" :max="40" interactive tooltip />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

min / max 传入后即锁定可见区间，超出范围的数据会被裁剪在绘图区之外。适合「只看某个区间」或让同一组卡片统一 Y 轴口径。

自定义主题 ​

vue
<template>
  <x-trend-chart :dataset="dataset" :theme="customTheme" />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];

const customTheme = {
  // 统一基础色：未单独指定颜色的层级都会继承
  color: '#7c3aed',
  // 默认权重：描边 1.5px、点半径 2px、激活竖线 1px
  stroke: { width: 2 },
  fill: { type: 'gradient', opacity: 0.16 },
  // point.width 实际为半径
  point: { width: 3 },
  axisLine: { width: 1, opacity: 0.7 },
};
</script>

主题会与状态主题按层级合并：只写 color 即可统一换色，单独设置 stroke.color 等字段可覆盖单层。

边界数据 ​

等值数据
单点数据
空数据暂无数据
vue
<template>
  <x-trend-chart :dataset="[10, 10, 10, 10, 10]" :height="56" />
  <x-trend-chart :dataset="[16]" :height="56" />
  <x-trend-chart :dataset="[]" :height="56" />
</template>

响应式尺寸 ​

容器尺寸变化（侧边栏折叠、ResizeBox 拖动、Tab 切换）会由 ResizeObserver 自动触发重算，图表的点位和标签不会错位。拖动下面的右边缘或底边缘查看效果。

vue
<template>
  <x-resize-box
    v-model:width="resizeWidth"
    v-model:height="resizeHeight"
    :min-width="120"
    :max-width="480"
    :directions="['right', 'bottom']"
    class="chart-box"
  >
    <x-trend-chart :dataset="dataset" :height="'100%'" status="primary" />
  </x-resize-box>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
const resizeWidth = ref(320);
const resizeHeight = ref(56);
</script>

<style scoped>
.chart-box {
  border: 1px solid var(--x-color-border-subtle);
  border-radius: 6px;
}
</style>

height 传 '100%' 时图表跟随父容器高度；容器尺寸变化无需监听 window.resize。

无障碍 ​

vue
<template>
  <x-trend-chart
    :dataset="dataset"
    :height="56"
    aria-label="近七日订单量趋势"
    interactive
    tooltip
  />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
</script>

设置 aria-label 后根节点会输出 role="img" 与可访问名称，屏幕阅读器可以播报图表用途。

按需导入 ​

ts
import { TrendChart } from 'x-next';

Props ​

参数说明类型默认值
dataset趋势数据集，非有限数字会被忽略number[][]
status状态主题'primary' | 'success' | 'warning' | 'strong' | 'danger' | 'info''primary'
grid已废弃（1.8.0 起不渲染），保留声明避免升级报错object | nullnull
labels已废弃（1.8.0 起不渲染），保留声明避免升级报错object | nullnull
height图表高度，数字按 px 处理number | string60
width图表宽度，数字按 px 处理number | string'100%'
max可见区间上界，传入后锁定并裁剪超出部分number数据最大值
min可见区间下界，传入后锁定并裁剪超出部分number数据最小值
padding绘制边距，支持 1-4 个非负数字字符串或单个非负数字；只表达呼吸空间，标签会自动排在它内侧string | number'5'
smooth是否使用平滑曲线booleantrue
stroke是否渲染描边booleantrue
fill是否渲染填充booleantrue
showPoints数据点显示策略，auto 在点距不足时只保留激活点boolean | 'auto''auto'
interactive是否开启鼠标交互booleanfalse
tooltip是否在 hover 时显示数值提示booleanfalse
tooltipFormatter数值提示文本格式化(value: number) => string(value) => \${value}``
ariaLabel无障碍名称，设置后输出 role="img"string-
theme自定义主题，会与状态主题按层级合并Theme{}

Theme ​

字段说明类型
color基础色，未单独指定颜色的层级（描边、填充、点、激活线）都会继承string
stroke.width描边宽度，默认 1.5number
stroke.color描边颜色string
stroke.opacity描边透明度number
fill.type填充类型，gradient 由描边色渐变到透明'solid' | 'gradient'
fill.color填充颜色string
fill.opacity填充透明度，gradient 时为峰值透明度number
point.width数据点半径（激活时 +1），默认 2number
point.color数据点颜色string
point.opacity数据点透明度number
axisLine.color交互激活竖线颜色string
axisLine.width交互激活竖线宽度，默认 1number
axisLine.opacity交互激活竖线透明度number

Events ​

事件名说明回调参数
mouse-move鼠标移动到图表时触发，interactive=true 时使用；离开或激活点失效时回调 null{ index: number; data: number } | null

使用说明 ​

  • 默认高度 60px，无需外部容器样式；需要更高时通过 height 指定。
  • 不带网格与坐标轴（grid / labels 自 1.8.0 起废弃、不再渲染）：需要读数请改用 LineChart，或在当前尺寸下开 tooltip。
  • 空数组会渲染空态文案，不会抛错。
  • 单点数据会渲染为一个点，且不渲染填充。
  • 所有值相同时，趋势线绘制在图表中线。
  • min / max 锁定数据域后，超出部分被裁剪而非扩展区间，适合区间放大与多图对齐口径。
  • 容器尺寸变化会自动重算；初始隐藏在 display: none 中的图表，在变为可见后同样会重新计算尺寸。