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

BoxPlot 箱线图

统计分布的 5 数概要 + outliers。

基础用法

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

背景

<script setup lang="ts">
import { CfBoxPlot } from '@chufix-design/vue';
const data = [
  { label: 'p50', min: 80, q1: 95, median: 110, q3: 125, max: 145, outliers: [220] },
  { label: 'p75', min: 120, q1: 140, median: 165, q3: 195, max: 230, outliers: [340] },
  { label: 'p95', min: 200, q1: 235, median: 280, q3: 320, max: 380 },
  { label: 'p99', min: 320, q1: 380, median: 440, q3: 510, max: 620, outliers: [820, 950] },
];
</script>

<template>
  <CfBoxPlot :data="data" />
</template>

<script setup>
import { CfBoxPlot } from '@chufix-design/vue';
const data = [
  { label: 'p50', min: 80, q1: 95, median: 110, q3: 125, max: 145, outliers: [220] },
  { label: 'p75', min: 120, q1: 140, median: 165, q3: 195, max: 230, outliers: [340] },
  { label: 'p95', min: 200, q1: 235, median: 280, q3: 320, max: 380 },
  { label: 'p99', min: 320, q1: 380, median: 440, q3: 510, max: 620, outliers: [820, 950] },
];
</script>

<template>
  <CfBoxPlot :data="data" />
</template>

<CfBoxPlot ... />

<CfBoxPlot ... />

API 延迟分布

4 个 API 的 p25/median/p75 + outliers，竖线显示完整 min-max 范围。

背景

<script setup lang="ts">
import { CfBoxPlot } from '@chufix-design/vue';
const apis = [
  { label: '/login', min: 50, q1: 65, median: 80, q3: 110, max: 145, outliers: [220, 280] },
  { label: '/orders', min: 30, q1: 50, median: 75, q3: 110, max: 160, outliers: [320, 510] },
  { label: '/checkout', min: 80, q1: 110, median: 145, q3: 200, max: 280, outliers: [580] },
  { label: '/payment', min: 200, q1: 240, median: 290, q3: 360, max: 440, outliers: [820, 950, 1100] },
];
</script>

<template>
  <CfBoxPlot :data="apis" :height="240" />
</template>

<script setup>
import { CfBoxPlot } from '@chufix-design/vue';
const apis = [
  { label: '/login', min: 50, q1: 65, median: 80, q3: 110, max: 145, outliers: [220, 280] },
  { label: '/orders', min: 30, q1: 50, median: 75, q3: 110, max: 160, outliers: [320, 510] },
  { label: '/checkout', min: 80, q1: 110, median: 145, q3: 200, max: 280, outliers: [580] },
  { label: '/payment', min: 200, q1: 240, median: 290, q3: 360, max: 440, outliers: [820, 950, 1100] },
];
</script>

<template>
  <CfBoxPlot :data="apis" :height="240" />
</template>

<CfBoxPlot data={apis} />

<CfBoxPlot data={apis} />

API

属性	类型	默认值	说明
`data`	`BoxStat[]`	`—`	{ label, min, q1, median, q3, max, outliers? }[]