[ECharts]軽量化する方法

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

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

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: ベクター形式。メモリ消費を抑えたい場合や拡大・縮小に強い。

[MySQL]ERROR 1819 (HY000) パスワードポリシー・エラーの回避術

MySQLでユーザー作成時に発生する「ERROR 1819」の解決策を解説。原因であるパスワードポリシーの仕組みを紐解き、本番環境向けの強力なパスワード設定と、開発環境向けのポリシー緩和手順の2通りを紹介します。

mtoy.work

2026.03.06

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

TypeScriptを使用している場合

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

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

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

Webpack / Vite の設定

特別な設定は不要ですが、ビルドツール側で production モードにしておくことで、Tree Shakingが有効になり、未使用のコードが最終的なバンドルファイルから削除されます。

4. オンラインビルダーの活用(npmを使用しない場合)

もしビルドツール(Webpack等)を使わずに、静的なJSファイルとして軽量版が欲しい場合は、公式のオンラインビルダーが便利です。

1. ECharts Online Builder にアクセス
2. 必要なグラフやコンポーネントにチェックを入れる
3. 「Download」ボタンを押すと、それらだけが含まれた echarts.min.js が生成されます。