EChartsを軽量化する方法

EChartsはフルパッケージで導入するとファイルサイズがかなり大きくなりますが、「Tree Shaking（ツリーシェイキング）」に対応したモジュール単位のインポートを行うことで、使用する機能だけに絞り込み、サイズを劇的に軽量化できます。

以下に、ECharts 5以降で推奨されている、必要なコンポーネントのみを抽出してビルドする手順を解説します。

1. 基本的な実装手順
1. 実装例（例：棒グラフ + ツールチップ + Canvasレンダラー）
2. 主要なインポートパスのリスト
3. さらにサイズを削るためのポイント
1. TypeScriptを使用している場合
2. Webpack / Vite の設定
4. オンラインビルダーの活用（npmを使用しない場合）

1. 基本的な実装手順

必要なモジュールを echarts/core から読み込み、echarts.use() で登録するのが基本の流れです。

実装例（例：棒グラフ + ツールチップ + Canvasレンダラー）

// 1. コアモジュールの導入
import * as echarts from 'echarts/core';

// 2. 使用するチャート（グラフ種類）の導入
import { BarChart } from 'echarts/charts';

// 3. 使用するコンポーネント（タイトル、ツールチップ、グリッドなど）の導入
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

// 4. レンダラーの導入（Canvas または SVG）
import { CanvasRenderer } from 'echarts/renderers';

// 5. 必要な機能を登録
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  CanvasRenderer
]);

// あとは通常通り初期化して使用
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...設定
});

2. 主要なインポートパスのリスト

使用したいグラフや機能に合わせて、以下のパスからインポートしてください。

チャート（echarts/charts）

LineChart: 折れ線グラフ
BarChart: 棒グラフ
PieChart: 円グラフ
ScatterChart: 散布図
RadarChart: レーダーチャート

コンポーネント（echarts/components）

GridComponent: グラフの描画エリア（多くの場合必須）
TitleComponent: タイトル
TooltipComponent: ツールチップ（マウスオーバー時の詳細表示）
LegendComponent: 凡例
VisualMapComponent: データの視覚的なマッピング
DataZoomComponent: ズーム機能

レンダラー（echarts/renderers）

CanvasRenderer: 標準的なレンダラー（通常はこちら）
SVGRenderer: ベクター形式。メモリ消費を抑えたい場合や拡大・縮小に強い。

3. さらにサイズを削るためのポイント

TypeScriptを使用している場合

型定義も同様にインポートすることで、開発効率を落とさずに軽量化できます。

import { ComposeOption } from 'echarts/core';
import { BarSeriesOption } from 'echarts/charts';
import { TitleComponentOption } from 'echarts/components';

// 使用する機能の型のみを合成
type ECOption = ComposeOption<
  BarSeriesOption | TitleComponentOption
>;