EChart

Apache ECharts の薄いラッパー。配色はテーマトークンに追従する。

Apache ECharts をそのまま使えるようにした薄いラッパーです。キャンバスの初期化・リサイズ・破棄と、 ローディング表示・イベント購読・PNG 保存を面倒みます。配色はテーマトークンに追従します — 系列色は --chart-1 〜 --chart-5、軸・凡例・ツールチップは文字色と境界色のトークンから組まれ、 ライト / ダークの切り替えにも追いかけます。

export const client = "only";

import { EChart } from "@squadbase/vantage/components";
import type { EChartsOption } from "@squadbase/vantage/components";

const months = ["2月", "3月", "4月", "5月", "6月", "7月"];

// 色は指定しない — 系列色も軸・凡例もテーマトークンから入る
const option: EChartsOption = {
  tooltip: { trigger: "axis" },
  legend: { top: 0 },
  grid: { left: 8, right: 8, bottom: 8, top: 32, containLabel: true },
  xAxis: { type: "category", data: months },
  yAxis: { type: "value" },
  series: [
    { name: "売上", type: "bar", data: [820, 932, 901, 934, 1290, 1330] },
    { name: "件数", type: "line", data: [120, 132, 101, 134, 190, 230] },
  ],
};

export default function Example() {
  return <EChart className="w-[40rem]" option={option} height={300} />;
}

import { EChart } from "@squadbase/vantage/components";
import type { EChartsOption } from "@squadbase/vantage/components";

配色を上書きする

既定ではテーマの --chart-1 〜 --chart-5 がそのまま系列色になります。ECharts は描画中には CSS 変数を読めませんが、EChart は init のタイミングで getComputedStyle からトークンの実値を 解決し、ECharts のテーマとして渡しています。トークンが変わりうる操作は見張っていて、値が 実際に変わったときだけ読み直します ― .dark の付け外しだけでなく、スタイルシートの差し替え (開発中に styles.css を書き換えた・テーマプリセットを当てた、など)も拾います。

系列に固有の色を当てたいときは option.color(または series[].itemStyle.color)で上書きします。 option はテーマより優先されるので、軸・凡例・ツールチップのトークン追従は残ります。

const option: EChartsOption = {
  color: ["#3b82f6", "#f59e0b", "#10b981"],
  series: [{ type: "bar", data: [1, 2, 3] }],
};

チャート全体を自前のテーマで描きたいときは、echarts.registerTheme で登録したテーマ名(またはテーマオブジェクト)を theme プロップに渡します。この場合は トークン追従が完全に無効になり、明暗の切り替えにも追従しなくなります。

凡例と重ならないようにする

legend を出すときは top: 0 を付け、grid.top でプロット領域を下げてください。省くと凡例が プロットに重なります。

legend: { top: 0 },
grid: { top: 32, containLabel: true },