TrendChart 趋势图

用于展示小型趋势、指标变化和概览图表。组件自身使用 width: 100%; height: 100%，使用时需要给图表或外层容器设置明确高度。

基础用法

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

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

<style scoped>
.chart {
  height: 180px;
}
</style>

状态主题

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

网格与标签

<template>
  <x-trend-chart
    :dataset="dataset"
    status="primary"
    class="chart"
    padding="28 24 32 42"
    :grid="{ verticalLines: true, horizontalLines: true, horizontalLinesNumber: 4 }"
    :labels="labels"
  />
</template>

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
const labels = {
  xLabels: ['一', '二', '三', '四', '五', '六', '日', '下周'],
  yLabels: 4,
  yLabelsTextFormatter: (value: number) => `${Math.round(value)}`,
};
</script>

交互事件

等待鼠标移动

<template>
  <x-trend-chart
    :dataset="dataset"
    interactive
    class="chart"
    @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('等待鼠标移动');
const handleMouseMove = (event: { index: number; data: number } | null) => {
  hoverInfo.value = event ? `index: ${event.index}, value: ${event.data}` : '已离开';
};
</script>

自定义主题

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

<script setup lang="ts">
const dataset = [12, 18, 14, 24, 32, 28, 36, 42];
const customTheme = {
  stroke: { color: '#7c3aed' },
  fill: { color: '#7c3aed', opacity: 0.16 },
  point: { color: '#7c3aed', width: 3 },
  axisLine: { color: '#7c3aed', width: 1, opacity: 0.7 },
};
</script>

边界数据

等值数据

单点数据

空数据

<template>
  <x-trend-chart :dataset="[10, 10, 10, 10, 10]" class="chart" />
  <x-trend-chart :dataset="[16]" class="chart" />
  <x-trend-chart :dataset="[]" class="chart" />
</template>

按需导入

import { TrendChart } from 'x-next';

Props

参数	说明	类型	默认值
dataset	趋势数据集	number[]	[]
status	状态主题	'primary' | 'success' | 'warning' | 'strong' | 'danger' | 'info'	'info'
grid	网格配置	{ verticalLines?: boolean; verticalLinesNumber?: number; horizontalLines?: boolean; horizontalLinesNumber?: number }	null
labels	标签配置	{ xLabels: string[]; yLabels: number; yLabelsTextFormatter: (value: number) => string }	null
max	最大值	number	数据最大值
min	最小值	number	数据最小值
padding	绘制边距，只支持 1-4 个非负数字	string	'5'
interactive	是否开启鼠标交互	boolean	false
theme	自定义主题，会与状态主题按层级合并	Theme	{}

Events

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

使用说明

• 组件需要明确高度，可直接给组件 class 设置 height。
• 空数组会渲染空态文案，不会抛错。
• 单点数据会渲染为一个点。
• 所有值相同时，趋势线会绘制在图表中线。