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

ChartToolbar 图表工具栏

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

基础用法

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

背景视口

系统资源

last 24h · 1m sampling

CPU
Memory
Disk

图表区

src/App.vue

<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>

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

export default function Demo() {
  const series = [
    { name: 'CPU', colorIndex: 0 },
    { name: 'Memory', colorIndex: 1 },
    { name: 'Disk', colorIndex: 2, hidden: true },
  ];
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfChartToolbar title="系统资源" subtitle="last 24h · 1m sampling" series={series} showZoom showExport showRefresh onSeriesToggle={(name) => alert(`Toggle: ${name}`)}
            onAction={(kind) => alert(`Action: ${kind}`)}
          />
          <div style={{ height: 80, background: "var(--bg-inset)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fg-3)" }}>图表区</div>
        </div>
    </>
  );
}

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

export default function Demo() {
  const series = [
    { name: 'CPU', colorIndex: 0 },
    { name: 'Memory', colorIndex: 1 },
    { name: 'Disk', colorIndex: 2, hidden: true },
  ];
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfChartToolbar title="系统资源" subtitle="last 24h · 1m sampling" series={series} showZoom showExport showRefresh onSeriesToggle={(name) => alert(`Toggle: ${name}`)}
            onAction={(kind) => alert(`Action: ${kind}`)}
          />
          <div style={{ height: 80, background: "var(--bg-inset)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fg-3)" }}>图表区</div>
        </div>
    </>
  );
}

交互联动

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

背景视口

系统资源

last 10m · live

CPU
Memory
Disk

src/App.vue

<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: string) => alert(`Action: ${kind}`)"
    />
    <div style="padding: 12px;">
      <CfLineChart :series="visible" :height="180" smooth />
    </div>
  </div>
</template>

import { useState } from 'react';
import { CfChartToolbar, CfLineChart } from '@chufix-design/react';

export default function Demo() {
  const [series, setSeries] = useState([
    { 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 = series.filter((s) => !s.hidden);
  function toggle(name: string) {
    setSeries(series.map((s) =>
      s.name === name ? { ...s, hidden: !s.hidden } : s,
    ));
  }
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfChartToolbar title="系统资源" subtitle="last 10m · live" series={series} showZoom showExport showRefresh onSeriesToggle={(name: string) => toggle(name)}
            onAction={(kind: string) => alert(`Action: ${kind}`)}
          />
          <div style={{ padding: 12 }}>
            <CfLineChart series={visible} height={180} smooth />
          </div>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfChartToolbar, CfLineChart } from '@chufix-design/react';

export default function Demo() {
  const [series, setSeries] = useState([
    { 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 = series.filter((s) => !s.hidden);
  function toggle(name) {
    setSeries(series.map((s) =>
      s.name === name ? { ...s, hidden: !s.hidden } : s,
    ));
  }
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "hidden" }}>
          <CfChartToolbar title="系统资源" subtitle="last 10m · live" series={series} showZoom showExport showRefresh onSeriesToggle={(name) => toggle(name)}
            onAction={(kind: string) => alert(`Action: ${kind}`)}
          />
          <div style={{ padding: 12 }}>
            <CfLineChart series={visible} height={180} smooth />
          </div>
        </div>
    </>
  );
}

API

Props

属性	类型	默认值	说明
`title`	`string`	`—`	标题
`subtitle`	`string`	`—`	副标题
`series`	`LegendSeries[]`	`—`	`{ name, colorIndex, hidden? }[]`；点击 legend chip 触发 toggle
`showZoom`	`boolean`	`false`	显示 zoom-in / zoom-out 按钮
`showExport`	`boolean`	`false`	显示 export 按钮
`showRefresh`	`boolean`	`false`	显示 refresh 按钮

Events

Vue 事件	React 回调	载荷类型	说明
`series-toggle`	`onSeriesToggle`	`(name: string, series: LegendSeries)`	点击 legend chip 切换某 series 显隐
`action`	`onAction`	`'zoom-in' \| 'zoom-out' \| 'export' \| 'refresh'`	点击工具栏按钮时触发，载荷是动作 kind

类型

interface LegendSeries {
  name: string;
  colorIndex: number;
  hidden?: boolean;
}