EChart

A thin Apache ECharts wrapper whose colours follow the theme tokens.

A thin wrapper around Apache ECharts. It handles the canvas lifecycle (init, resize, dispose), the loading overlay, event subscriptions and PNG export. Colours follow the theme tokens — series come from --chart-1 through --chart-5, while axes, legend and tooltip are built from the text and border tokens. A light/dark switch is picked up too.

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

PropType

option?EChartsOption

The ECharts option, passed straight through.

TypeEChartsOption

height?string | number

Height; a number means px. `className` works too.

Typestring | number

loading?boolean

Show ECharts' loading overlay.

Typeboolean

theme?string | object

The theme passed to `echarts.init` (a name or a registered theme). Passing one turns token-following off.

Typestring | object

onEvents?Record<string, (params: unknown) => void>

Subscribe to ECharts events such as `click`.

TypeRecord<string, (params: unknown) => void>

ariaLabel?string

A description of the chart.

Typestring

actions?boolean

Show actions such as save-as-image.

Typeboolean

fileName?string

File name used when saving.

Typestring

Overriding the palette

By default the theme’s --chart-1 through --chart-5 become the series colours. ECharts can’t read CSS variables while painting, but EChart resolves the tokens once at init with getComputedStyle and passes them in as an ECharts theme. It watches for anything that can change those tokens and re-reads them when the values actually move — the .dark class going on and off, and stylesheet swaps too (editing styles.css with the dev server running, applying a theme preset, …).

To give series their own colours, set option.color (or series[].itemStyle.color). Your option wins over the theme, so axes, legend and tooltip keep following the tokens.

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

To paint the whole chart with a theme of your own, register it with echarts.registerTheme and pass the name (or the theme object) to theme. That turns token-following off entirely — including the light/dark switch.

Keeping the legend off the plot

When you show a legend, give it top: 0 and push the plot down with grid.top. Omit this and the legend overlaps the plot area.

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