图表 - Lark

图表组件基于 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,
]);

可用图表

时间序列图表

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

了解更多

自定义图表

饼图等示例。

了解更多

颜色体系

颜色调色板

关于我们的颜色体系。

了解更多

图例

使用 LegendItem 显示带颜色标识的图表系列信息。

LargeItem 大号图例项

激活状态

请求数

1,234次/秒

存储

56GB

警告数

128

未激活状态

请求数

1,234次/秒

存储

56GB

警告数

128

加载状态

import { ChartPalette, ChartLegend } from "@lark-ui/core";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

/**
 * 默认变体的图例项，展示语义化颜色。
 */
export function LegendDefaultDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">激活状态</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-lark-hairline">
        <ChartLegend.LargeItem
          name="请求数"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="次/秒"
        />
        <ChartLegend.LargeItem
          name="存储"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.LargeItem
          name="警告数"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">未激活状态</h3>

      <div className="flex flex-wrap gap-4 divide-x divide-lark-hairline">
        <ChartLegend.LargeItem
          name="请求数"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="次/秒"
          inactive
        />
        <ChartLegend.LargeItem
          name="存储"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.LargeItem
          name="警告数"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">加载状态</h3>

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

SmallItem 小号图例项

激活状态

请求数1,234

存储56

警告数128

未激活状态

请求数1,234

存储56

警告数128

加载状态

import { ChartPalette, ChartLegend } from "@lark-ui/core";
import { useIsDarkMode } from "~/lib/use-is-dark-mode";

/**
 * 紧凑变体的图例项，使用分类色板。
 */
export function LegendCompactDemo() {
  const isDarkMode = useIsDarkMode();

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">激活状态</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="请求数"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="次/秒"
        />
        <ChartLegend.SmallItem
          name="存储"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
        />
        <ChartLegend.SmallItem
          name="警告数"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">未激活状态</h3>
      <div className="flex flex-wrap gap-4">
        <ChartLegend.SmallItem
          name="请求数"
          color={ChartPalette.semantic("Neutral", isDarkMode)}
          value="1,234"
          unit="次/秒"
          inactive
        />
        <ChartLegend.SmallItem
          name="存储"
          color={ChartPalette.semantic("Attention", isDarkMode)}
          value="56"
          unit="GB"
          inactive
        />
        <ChartLegend.SmallItem
          name="警告数"
          color={ChartPalette.semantic("Warning", isDarkMode)}
          value="128"
          inactive
        />
      </div>

      <h3 className="mt-12 text-sm font-medium">加载状态</h3>

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

读取延迟

P99

124ms

P95

76ms

P75

32ms

P50

10ms