开发预览更新于 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() {
  return (
    <>
      <CfAreaChart ... />
    </>
  );
}

堆叠模式

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

背景

stacked = false（重叠）

stacked = true

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>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = false（重叠）</div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = true</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>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = false（重叠）</div>
      <CfAreaChart :series="series" :height="180" smooth />
    </div>
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">stacked = true</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 />
    </>
  );
}

API

属性	类型	默认值	说明
`series`	`AreaSeries[]`	`—`	{ name?, data: number[] }[]
`stacked`	`boolean`	`false`	堆叠模式
`smooth`	`boolean`	`false`	平滑
`width / height / showGrid / showLabels`	“	“	同 LineChart