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

ChartToolbar 图表工具栏

图表头部工具条：标题 + legend 切换 + zoom/export/refresh 按钮。

基础用法

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

背景

系统资源

last 24h · 1m sampling

CPU
Memory
Disk

图表区

<script setup lang="ts">
import { CfChartToolbar } from '@chufix-design/vue';
const series = [
  { name: 'CPU', colorIndex: 0 },
  { name: 'Memory', colorIndex: 1 },
  { name: 'Disk', colorIndex: 2, hidden: true },
];
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfChartToolbar
      title="系统资源"
      subtitle="last 24h · 1m sampling"
      :series="series"
      show-zoom
      show-export
      show-refresh
      @series-toggle="(name) => alert(`Toggle: ${name}`)"
      @action="(kind) => alert(`Action: ${kind}`)"
    />
    <div style="height: 80px; background: var(--bg-inset); display: flex; align-items: center; justify-content: center; color: var(--fg-3);">图表区</div>
  </div>
</template>

<script setup>
import { CfChartToolbar } from '@chufix-design/vue';
const series = [
  { name: 'CPU', colorIndex: 0 },
  { name: 'Memory', colorIndex: 1 },
  { name: 'Disk', colorIndex: 2, hidden: true },
];
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfChartToolbar
      title="系统资源"
      subtitle="last 24h · 1m sampling"
      :series="series"
      show-zoom
      show-export
      show-refresh
      @series-toggle="(name) => alert(`Toggle: ${name}`)"
      @action="(kind) => alert(`Action: ${kind}`)"
    />
    <div style="height: 80px; background: var(--bg-inset); display: flex; align-items: center; justify-content: center; color: var(--fg-3);">图表区</div>
  </div>
</template>

<CfChartToolbar ... />

<CfChartToolbar ... />

交互联动

legend chip 点击 toggle 隐藏 series；下方 LineChart 实时联动重画。

背景

系统资源

last 10m · live

CPU
Memory
Disk

<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfChartToolbar, CfLineChart } from '@chufix-design/vue';
const series = ref([
  { name: 'CPU', colorIndex: 0, hidden: false, data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80] },
  { name: 'Memory', colorIndex: 1, hidden: false, data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70] },
  { name: 'Disk', colorIndex: 2, hidden: true, data: [10, 12, 14, 18, 22, 25, 28, 32, 30, 35] },
]);
const visible = computed(() => series.value.filter((s) => !s.hidden));
function toggle(name: string) {
  series.value = series.value.map((s) =>
    s.name === name ? { ...s, hidden: !s.hidden } : s,
  );
}
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfChartToolbar
      title="系统资源"
      subtitle="last 10m · live"
      :series="series"
      show-zoom
      show-export
      show-refresh
      @series-toggle="(name: string) => toggle(name)"
      @action="(kind: string) => alert(`Action: ${kind}`)"
    />
    <div style="padding: 12px;">
      <CfLineChart :series="visible" :height="180" smooth />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { CfChartToolbar, CfLineChart } from '@chufix-design/vue';
const series = ref([
  { name: 'CPU', colorIndex: 0, hidden, data: [20, 35, 30, 50, 65, 45, 60, 75, 65, 80] },
  { name: 'Memory', colorIndex: 1, hidden, data: [40, 38, 50, 55, 60, 58, 62, 68, 72, 70] },
  { name: 'Disk', colorIndex: 2, hidden, data: [10, 12, 14, 18, 22, 25, 28, 32, 30, 35] },
]);
const visible = computed(() => series.value.filter((s) => !s.hidden));
function toggle(name) {
  series.value = series.value.map((s) =>
    s.name === name ? { ...s, hidden: !s.hidden } : s,
  );
}
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <CfChartToolbar
      title="系统资源"
      subtitle="last 10m · live"
      :series="series"
      show-zoom
      show-export
      show-refresh
      @series-toggle="(name) => toggle(name)"
      @action="(kind) => alert(`Action: ${kind}`)"
    />
    <div style="padding: 12px;">
      <CfLineChart :series="visible" :height="180" smooth />
    </div>
  </div>
</template>

<CfChartToolbar series={series} onSeriesToggle={toggle} />
<CfLineChart series={visibleSeries} />

<CfChartToolbar series={series} onSeriesToggle={toggle} />
<CfLineChart series={visibleSeries} />

API

属性	类型	默认值	说明
`title / subtitle`	`string`	`—`	标题 + 描述
`series`	`LegendSeries[]`	`—`	{ name, colorIndex, hidden? }[]，点击 legend 触发 toggle
`showZoom / showExport / showRefresh`	`boolean`	`false`	显示按钮槽