开发预览更新于 2026-05-10

LineChart 折线图

多 series 折线图，支持平滑曲线、网格线、x/y 轴标签。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [
  { name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] },
  { name: 'Memory', data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70, 75, 78] },
];
const labels = ['00','02','04','06','08','10','12','14','16','18','20','22'];
</script>

<template>
  <CfLineChart :series="series" :labels="labels" smooth />
</template>

<CfLineChart ... />

平滑曲线

smooth = true 走 Catmull-Rom 风格的 cubic Bezier，控制点取相邻两点的差值乘以 0.2 张力，不会过冲（不会出现拐点处的”半圆”鼓包）。

背景

smooth = false

smooth = true（Catmull-Rom）

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [{ name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] }];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">smooth = false</div>
      <CfLineChart :series="series" :height="180" />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">smooth = true（Catmull-Rom）</div>
      <CfLineChart :series="series" :height="180" smooth />
    </div>
  </div>
</template>

<CfLineChart series={series} smooth />

多 series

最多支持 8 条同时显示，配色按 --viz-1..8 依次循环。

背景

<script setup lang="ts">
import { CfLineChart } from '@chufix-design/vue';
const series = [
  { name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] },
  { name: 'Memory', data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70, 75, 78] },
  { name: 'Disk IO', data: [10, 12, 14, 18, 22, 25, 28, 32, 30, 35, 38, 42] },
  { name: 'Network', data: [5, 8, 10, 9, 12, 14, 18, 22, 19, 25, 28, 30] },
];
</script>

<template>
  <CfLineChart :series="series" smooth />
</template>

<CfLineChart series={series} smooth />

API

属性	类型	默认值	说明
`series`	`LineSeries[]`	`—`	{ name?, data: number[] }[]
`labels`	`string[]`	`自动 0..n-1`	x 轴标签
`width / height`	`number`	`480 / 240`
`smooth`	`boolean`	`false`	平滑曲线
`showGrid / showLabels`	`boolean`	`true`
`yLabelFn`	`(v) => string`	`v.toFixed(0)`	y 轴标签格式化