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

PyramidChart 金字塔图

左右对称条形图，常用于人口年龄结构、性别对比、资金来源/用途等场景。

基础用法

数据使用 { label, left, right }[]，每一行的 left 向左侧绘制条，right 向右侧绘制条，共享同一比例尺。

背景视口

src/App.vue

<script setup lang="ts">
import { CfPyramidChart } from '@chufix-design/vue';

const data = [
  { label: '0–14', left: 6.8, right: 6.2 },
  { label: '15–24', left: 5.9, right: 5.4 },
  { label: '25–34', left: 8.1, right: 7.8 },
  { label: '35–44', left: 9.4, right: 9.1 },
  { label: '45–54', left: 8.7, right: 8.6 },
  { label: '55–64', left: 6.9, right: 7.1 },
  { label: '65+', left: 5.2, right: 6.4 },
];

function fmt(v: number) {
  return `${v.toFixed(1)}%`;
}
</script>
<template>
  <CfPyramidChart
    :data="data"
    :width="540"
    :height="340"
    left-label="男性"
    right-label="女性"
    :format="fmt"
  />
</template>

<script setup>
import { CfPyramidChart } from '@chufix-design/vue';

const data = [
  { label: '0–14', left: 6.8, right: 6.2 },
  { label: '15–24', left: 5.9, right: 5.4 },
  { label: '25–34', left: 8.1, right: 7.8 },
  { label: '35–44', left: 9.4, right: 9.1 },
  { label: '45–54', left: 8.7, right: 8.6 },
  { label: '55–64', left: 6.9, right: 7.1 },
  { label: '65+', left: 5.2, right: 6.4 },
];

function fmt(v) {
  return `${v.toFixed(1)}%`;
}
</script>
<template>
  <CfPyramidChart
    :data="data"
    :width="540"
    :height="340"
    left-label="男性"
    right-label="女性"
    :format="fmt"
  />
</template>

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

export default function Demo() {
  const data = [
    { label: '0–14', left: 6.8, right: 6.2 },
    { label: '15–24', left: 5.9, right: 5.4 },
    { label: '25–34', left: 8.1, right: 7.8 },
    { label: '35–44', left: 9.4, right: 9.1 },
    { label: '45–54', left: 8.7, right: 8.6 },
    { label: '55–64', left: 6.9, right: 7.1 },
    { label: '65+', left: 5.2, right: 6.4 },
  ];

  function fmt(v: number) {
    return `${v.toFixed(1)}%`;
  }
  return (
    <>
      <CfPyramidChart data={data} width={540} height={340} left-label="男性" right-label="女性" format={fmt} />
    </>
  );
}

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

export default function Demo() {
  const data = [
    { label: '0–14', left: 6.8, right: 6.2 },
    { label: '15–24', left: 5.9, right: 5.4 },
    { label: '25–34', left: 8.1, right: 7.8 },
    { label: '35–44', left: 9.4, right: 9.1 },
    { label: '45–54', left: 8.7, right: 8.6 },
    { label: '55–64', left: 6.9, right: 7.1 },
    { label: '65+', left: 5.2, right: 6.4 },
  ];

  function fmt(v) {
    return `${v.toFixed(1)}%`;
  }
  return (
    <>
      <CfPyramidChart data={data} width={540} height={340} left-label="男性" right-label="女性" format={fmt} />
    </>
  );
}

API

属性	类型	默认值	说明
`data`	`PyramidRow[]`	`—`	`{ label, left, right }[]`
`width` / `height`	`number`	`520/320`	—
`leftLabel` / `rightLabel`	`string`	`左侧 / 右侧`	顶部表头
`gap`	`number`	`72`	中间标签区宽度
`format`	`(v) => string`	`Math.round`	数值格式化

Events

Vue	React	载荷
`bar-enter` / `bar-leave`	`onBarEnter` / `onBarLeave`	`{ row, side: 'left' \| 'right', dataIndex }`