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

LineChart 折线图

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

基础用法

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

背景视口

src/App.vue

<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>

<script setup>
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>

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  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'];
  return (
    <>
      <CfLineChart series={series} labels={labels} smooth />
    </>
  );
}

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  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'];
  return (
    <>
      <CfLineChart series={series} labels={labels} smooth />
    </>
  );
}

平滑曲线

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

背景视口

src/App.vue

<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>
      <CfLineChart :series="series" :height="180" />
    </div>
    <div>
      <CfLineChart :series="series" :height="180" smooth />
    </div>
  </div>
</template>

<script setup>
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>
      <CfLineChart :series="series" :height="180" />
    </div>
    <div>
      <CfLineChart :series="series" :height="180" smooth />
    </div>
  </div>
</template>

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  const series = [{ name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] }];
  return (
    <>
      <CfLineChart series={series} smooth />
    </>
  );
}

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  const series = [{ name: 'CPU', data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80, 70, 85] }];
  return (
    <>
      <CfLineChart series={series} smooth />
    </>
  );
}

多 series

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

背景视口

src/App.vue

<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>

<script setup>
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>

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  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] },
  ];
  return (
    <>
      <CfLineChart series={series} smooth />
    </>
  );
}

import { CfLineChart } from '@chufix-design/react';

export default function Demo() {
  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] },
  ];
  return (
    <>
      <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: number) => string`	`v.toFixed(0)`	y 轴标签格式化
`showLegend`	`boolean`	`true`	显示图例
`showTooltip`	`boolean`	`true`	启用 hover tooltip
`valueFormatter`	`(value, item: LineChartTooltipItem) => string`	—	tooltip 内单 series 值的格式化
`tooltipFormatter`	`(payload: LineChartInteractionPayload) => string`	—	完整 tooltip HTML 自渲染（覆盖默认布局）
`ariaLabel`	`string`	—	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`LineChartInteractionPayload`	鼠标进入某 x 位置时触发；含 `label / dataIndex / items[] / nativeEvent`
`item-leave`	`onItemLeave`	`LineChartInteractionPayload`	鼠标离开图表时触发
`legend-toggle`	`onLegendToggle`	`(index: number, hidden: boolean)`	用户点击图例切换 series 显隐时触发

类型

interface LineChartTooltipItem {
  name?: string;
  value: number;
  colorIndex: number;
  seriesIndex: number;
  dataIndex: number;
}

interface LineChartInteractionPayload {
  label: string;
  dataIndex: number;
  items: LineChartTooltipItem[];
  nativeEvent?: MouseEvent;
}