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

AreaChart 面积图

面积图，支持堆叠模式与平滑曲线。

基础用法

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

背景视口

src/App.vue

<script setup lang="ts">
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
];
</script>
<template>
  <CfAreaChart :series="series" stacked smooth />
</template>

<script setup>
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
];
</script>
<template>
  <CfAreaChart :series="series" stacked smooth />
</template>

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

堆叠模式

stacked = true 把 series 累加显示（每条数据值是前面所有 series 的累加值），适合展示组成；默认 false 重叠显示，适合比较趋势。

背景视口

src/App.vue

<script setup lang="ts">
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <CfAreaChart :series="series" :height="180" smooth stacked />
    </div>
  </div>
</template>

<script setup>
import { CfAreaChart } from '@chufix-design/vue';
const series = [
  { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
  { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
  { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
  { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
];
</script>
<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
    <div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <CfAreaChart :series="series" :height="180" smooth stacked />
    </div>
  </div>
</template>

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
    { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

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

export default function Demo() {
  const series = [
    { name: 'GET', data: [10, 14, 12, 18, 22, 20, 26, 32, 28, 35, 30, 40] },
    { name: 'POST', data: [3, 5, 4, 6, 8, 7, 10, 12, 11, 14, 13, 16] },
    { name: 'PUT', data: [1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7] },
    { name: 'DELETE', data: [0, 1, 0, 2, 1, 1, 2, 3, 2, 3, 4, 3] },
  ];
  return (
    <>
      <CfAreaChart series={series} stacked smooth />
    </>
  );
}

API

Props

属性	类型	默认值	说明
`series`	`AreaSeries[]`	`—`	`{ name?, data: number[] }[]`
`labels`	`string[]`	自动 `0..n-1`	x 轴标签
`width`	`number`	`480`	SVG 宽度
`height`	`number`	`240`	SVG 高度
`stacked`	`boolean`	`false`	堆叠模式（series 值累加）
`smooth`	`boolean`	`false`	平滑曲线
`showGrid`	`boolean`	`true`	显示网格
`showLabels`	`boolean`	`true`	显示坐标轴标签
`showLegend`	`boolean`	`true`	显示图例
`showTooltip`	`boolean`	`true`	启用 hover tooltip
`valueFormatter`	`(value, item: AreaChartTooltipItem) => string`	—	tooltip 内单 series 值的格式化
`tooltipFormatter`	`(payload: AreaChartInteractionPayload) => string`	—	完整 tooltip HTML 自渲染
`ariaLabel`	`string`	—	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`AreaChartInteractionPayload`	鼠标进入某 x 位置时触发
`item-leave`	`onItemLeave`	`AreaChartInteractionPayload`	鼠标离开时触发
`legend-toggle`	`onLegendToggle`	`(index: number, hidden: boolean)`	点击图例切换 series 显隐

类型

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

interface AreaChartInteractionPayload {
  label: string;
  dataIndex: number;
  items: AreaChartTooltipItem[];
  nativeEvent?: MouseEvent;
}