图表 - Kumo

图表组件基于 ECharts 构建。请先将其作为依赖安装：

npm install echarts

为获得最优的包体积，请只导入你需要的 ECharts 组件。下面的示例展示了我们各使用场景所需的最少导入。

import * as echarts from "echarts/core";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { useEffect, useMemo, useState } from "react";
import {
  AriaComponent,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  LineChart,
  PieChart,
  AxisPointerComponent,
  BrushComponent,
  GridComponent,
  MarkLineComponent,
  TooltipComponent,
  CanvasRenderer,
  AriaComponent,
]);

可用图表

时序图表

专用于展示基于时间的数据的图表。

Learn more

自定义图表

饼图等示例。

Learn more

配色体系

色板

关于我们配色体系的信息。

Learn more

图例

使用 LegendItem 展示图表系列信息，并带有颜色指示。

大尺寸项目

Active State

Requests

1,234req/s

Storage

56GB

Warnings

128

Inactive State

Requests

1,234req/s

Storage

56GB

Warnings

128

Loading state

import { ChartPalette, ChartLegend } from "@cloudflare/kumo";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

/**
 * Legend items with default variant showing semantic colors.
 */
export function LegendDefaultDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Active State</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <ChartLegend.LargeItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
        />
        <ChartLegend.LargeItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.LargeItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">Inactive State</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <ChartLegend.LargeItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
          inactive
        />
        <ChartLegend.LargeItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.LargeItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">Loading state</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
        <ChartLegend.LargeItem loading />
      </div>
    </div>
  );
}

小尺寸项目

Active State

Requests1,234

Storage56

Warnings128

Inactive State

Requests1,234

Storage56

Warnings128

Loading state

import { ChartPalette, ChartLegend } from "@cloudflare/kumo";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

/**
 * Legend items with compact variant using categorical colors.
 */
export function LegendCompactDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Active State</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
        />
        <ChartLegend.SmallItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.SmallItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">Inactive State</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="Requests"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="req/s"
          inactive
        />
        <ChartLegend.SmallItem
          name="Storage"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.SmallItem
          name="Warnings"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">Loading state</h3>

      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem loading />
      </div>
    </div>
  );
}

Read latency

P99

124ms

P95

76ms

P75

32ms

P50

10ms