EChartsとは？6.1系の部分インポートと大量データの描画設定・Chart.jsとの選び分け

Apache EChartsは、CanvasとSVGのどちらでも描画できるJavaScriptのグラフライブラリで、Apache-2.0ライセンスで配布されています。2026年10月29日にnpm registryで確認した最新版は6.1.0（2026年5月19日公開）でした。この記事では、6.1.0の依存構成と配信サイズの実測値、echarts/coreで必要な部品だけを登録する導入コード、数万点の時系列を止めずに描く設定、5系から6系へ上げたときに見た目が変わる箇所の戻し方を順に扱います。後半では、Chart.js・Recharts・BIツールとの選び分けを採用条件として言い切ります。業務システムや社内ダッシュボードにグラフを組み込む開発者と、その技術選定を任された担当者に向けた内容です。

まとめ：EChartsで作るダッシュボードと別の手段へ回す画面の分かれ目

EChartsが合うのは、数万点を超える時系列、地図やヒートマップ、関係図のような標準外の図形、ズームと複数グラフの連動のいずれかが要件に入っているダッシュボードです。描画の方式をCanvasとSVGで切り替えられ、大量データ向けの間引きも設定1行で入ります。フレームワークを問わず使える点も、ReactとVueの画面が混在する社内システムでは効いてきます。

見送る場面もはっきりしています。折れ線と棒が数枚あるだけの画面では、全部入りでgzip後369,392バイトという配信サイズが割に合いません。この場合はChart.jsかRechartsで足ります。閲覧者が自分で軸や集計を組み替えたい分析画面は、ライブラリではなくBIツールの領域です。導入するなら版は6.1系を選び、5系前提のサンプルは公式の6系アップグレードガイドと照らしてから流用してください。

EChartsの定義とApache-2.0の配布形態・6.1.0の依存と配信サイズの実測

EChartsは、グラフの中身をすべて1つの設定オブジェクト（option）で記述するライブラリです。軸、凡例、ツールチップ、系列、ズーム操作の部品までをsetOptionに渡すJSONで指定し、描画はEChartsが受け持ちます。

zrenderの上でCanvasとSVGを切り替える描画の仕組みと既定値

描画層には、2D描画ライブラリのzrender（6.1.0）を使っています。既定はCanvasで、初期化時にrenderer: 'svg'を渡すとSVGで描く仕組みです。公式のCanvasとSVGの選び方は、データが1,000件を超えるならCanvasを常に勧めると書いています。SVGはメモリ消費が少なく、低性能のAndroid端末ではSVGのほうが軽い場合がある、という補足付きです。

Canvasで描くので、点が増えてもDOM要素は増えません。SVGで描くRechartsとの差はここにあります。ただし軌跡のエフェクトや、ブレンドを使うヒートマップなど一部の効果はCanvasでしか動きません。

npm実測で見る6.1.0の公開日と依存パッケージ2つの構成

npm registryの記録では、5.0.0が2020年12月2日、5系の最終となる5.6.0が2024年12月28日、6.0.0が2025年7月30日、6.1.0が2026年5月19日に公開されています。6.1.0の実行時依存はtslibとzrender（6.1.0）の2つだけです。

6.1.0の変更点はGitHubのリリースノートで読めます。軸の範囲を見栄えよく丸めるdataMinとdataMaxの追加が目立ちますが、折れ線のツールチップのXSS脆弱性の修正も含まれていました。利用者の入力をラベルや系列名に流す画面では、6.1.0以上へ上げておく理由になります。

全部入り1,121,883バイトと部品を絞った版のgzip後サイズの実測値

2026年10月29日にjsDelivrから6.1.0の配布ファイルを取得し、gzipの圧縮レベル9で固めたサイズを測りました。

兄弟記事のChart.jsの導入コードと大量データの限界で測ったChart.js 4.5.1のUMD版は、gzip後で約70.8KBでした。全部入り同士だと、EChartsはおよそ5倍の重さです。npmで入れる場合は次章の部分インポートで、使うグラフと部品だけを束ねてこの差を縮めます。

npmで入れて必要な部品だけ登録し最初の棒グラフを描くまでの手順

インストールは1行です。型定義は本体に同梱されているので、TypeScriptの案件でも別のパッケージは要りません。

npm install echarts@6

echarts/coreとuseによる部分インポートとレンダラーの登録

import * as echarts from 'echarts'と書くと全部入りがバンドルされます。公式のnpm利用ガイドが示す方法は、echarts/coreから読み込み、グラフ・部品・レンダラーをecharts.useで登録する書き方です。このとき、レンダラーは自動では入らない点に注意してください。CanvasRendererかSVGRendererの登録を忘れると何も描画されません。

// ordersChart.ts：棒と折れ線だけを登録し、月次の受注件数と問い合わせ件数を描く
import * as echarts from 'echarts/core';
import type { ComposeOption } from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import type {
  DatasetComponentOption,
  GridComponentOption,
  LegendComponentOption,
  TooltipComponentOption,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, LineChart, DatasetComponent, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);

type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | DatasetComponentOption
  | GridComponentOption
  | LegendComponentOption
  | TooltipComponentOption
>;

const option: ECOption = {
  dataset: {
    source: [
      ['month', 'orders', 'inquiries'],
      ['4月', 12, 31],
      ['5月', 19, 42],
      ['6月', 15, 36],
      ['7月', 23, 48],
    ],
  },
  tooltip: { trigger: 'axis' },
  legend: {},
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [
    { type: 'bar', name: '受注件数', encode: { x: 'month', y: 'orders' } },
    { type: 'line', name: '問い合わせ件数', encode: { x: 'month', y: 'inquiries' } },
  ],
};

// 描画先の要素を受け取り、片付け用の関数を返す
export function mountOrdersChart(el: HTMLElement): () => void {
  const chart = echarts.init(el, null, { renderer: 'canvas' });
  chart.setOption(option);
  const observer = new ResizeObserver(() => chart.resize());
  observer.observe(el);
  return () => {
    observer.disconnect();
    chart.dispose();
  };
}

ComposeOptionに登録した部品の型だけを渡すと、登録していない部品の設定を書いたときに型エラーで気づけます。datasetは表形式のデータを1か所に置き、各系列はencodeで列名を指すだけにする書き方です。同じデータを棒と折れ線で使い回すときに、配列を系列ごとに複製せずに済みます。

描画先の高さ指定とresize・disposeで防ぐ表示崩れとメモリの残り

公式のGet Startedは、描画先に幅と高さを持つ要素を用意してからecharts.initを呼ぶ手順です。高さ0の要素に初期化すると、エラーにならずに何も表示されません。CSSでheight: 320pxのように高さを与えるのが確実です。

EChartsは要素の大きさの変化を自分では追いません。先のコードでResizeObserverからresizeを呼んでいるのはこのためです。タブ切り替えで非表示だった要素を表示したときも同じ処理で追従します。画面遷移のたびにグラフを作り直すSPAでは、disposeを呼ばないとインスタンスが残り、遷移を繰り返すほどメモリが増えていきます。

ReactとVueで使うラッパーの対応版と部分インポートの指定方法

Reactではecharts-for-react（2026年10月時点の最新3.0.6・MIT）が定番です。先のような初期化と破棄を部品の中で済ませてくれます。全部入りを避けたい場合はecharts-for-react/lib/coreから読み込み、echarts.useで登録したインスタンスをechartsプロパティに渡します。

import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';

// option と echarts.use の登録は前のコードと同じものを使う
export function OrdersPanel() {
  return <ReactEChartsCore echarts={echarts} option={option} notMerge lazyUpdate style={{ height: 320 }} />;
}

Vueではvue-echartsを使います。2026年10月9日公開の8.3.2はpeer依存にVue 3.3以上とECharts 6系を指定しており、Vue 2や5系とは組み合わせられません。古い案件で5系に留まる場合は、vue-echarts側も5系に対応した旧版を選ぶことになります。

数万点の時系列と散布図で描画を止めないsampling・large・dataZoomの設定

EChartsは大量データに強いとよく紹介されますが、既定の設定のままでは全点を描きます。速さを引き出す設定は自分で足す必要があります。

折れ線の全点描画：sampling ‘none’・progressive 0

GitHubの折れ線系列のソースを読むと、既定値はsampling: 'none'、progressive: 0、showSymbol: trueです。つまり間引きなし、分割描画なし、点の記号ありで描き始めます。86,400点（1秒ごとに1日分）をそのまま渡すと、ズームのたびに全点を描き直すことになります。

間引きの方式は'lttb'・'average'・'min'・'max'・'minmax'・'sum'から選べます。'minmax'は5.5.0で加わった方式です。推移の形と山谷を残したい監視系のグラフなら、まず'lttb'を選んでください。

lttbで形を保って間引く折れ線とdataZoomで期間を絞る設定例

// sensorOption.ts：1秒ごとのセンサー値（[時刻ミリ秒, 値] の配列）を間引いて描く
// 部分インポートでは LineChart・GridComponent・TooltipComponent・DataZoomComponent・CanvasRenderer を登録しておく
export function buildSensorOption(points: [number, number][]) {
  return {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'time' },
    yAxis: { type: 'value', scale: true },
    dataZoom: [
      { type: 'inside', start: 90, end: 100 },
      { type: 'slider', start: 90, end: 100 },
    ],
    series: [
      {
        type: 'line',
        data: points,
        sampling: 'lttb',
        showSymbol: false,
        animation: false,
      },
    ],
  };
}

samplingは、点の数が描画先の横幅のピクセル数を大きく上回るときに効く設定です。dataZoomで最初の表示を末尾10%に絞り、マウスホイールと下部のスライダーで範囲を動かせるようにしています。新しい値が届いたときの更新方法は、chart.setOption({ series: [{ data: newPoints }] })による系列データだけの差し替えです。setOptionは既定で前の設定と統合するので、軸やズーム位置は保たれます。

散布図のlargeとlargeThreshold 2000で切り替わる描画モード

散布図には別の仕組みがあります。散布図系列のソースではlarge: false、largeThreshold: 2000が既定です。large: trueを指定すると、点が2,000件を超えたところで点を1つずつの図形ではなくまとめて描くモードに切り替わります。

代わりに、点ごとの細かい装飾や一部の操作は効かなくなります。数十万件の分布を見せる画面ではlarge: trueを入れ、個々の点をクリックして詳細を開く画面では件数をサーバー側で絞るほうを選びます。どちらにするかは、点を「見る」のか「選ぶ」のかで決めてください。

5系の記事やコードを6系へ移すときに見た目が変わる箇所と戻し方

検索で見つかるEChartsの記事やサンプルは、5系を前提にしたものが大半です。6.0では書いたコードが動かなくなる変更は少ない一方、同じoptionでも見た目が変わる変更が入りました。リリース前の画面確認で気づくことが多いため、先に把握しておくと手戻りを減らせます。

6系での既定テーマの刷新と凡例の下部配置をv5テーマで戻す方法

6系アップグレードガイドによると、6.0で既定のテーマが新しくなり、配色に加えて部品の位置や大きさも変わりました。例として挙がっているのが、凡例の既定の位置がグラフの下部へ移った点です。5系と同じ見た目を保ちたい場合は、同梱のv5テーマを読み込んで初期化します。

import 'echarts/theme/v5';

const chart = echarts.init(el, 'v5');

配色だけを戻したいなら、5系の9色をregisterThemeで登録する方法もガイドに載っています。社内の資料や帳票とグラフの色を揃えている案件では、6系へ上げる前にどちらで戻すかを決めておきます。

軸ラベルのはみ出し防止とrichラベルの継承を5系の挙動へ戻す指定

2つ目の変更は直交座標の軸です。6.0から、軸名と軸ラベルのはみ出し防止と重なり防止が既定で有効になり、軸の位置がわずかにずれることがあります。余白を手で調整していた画面が崩れたら、grid.outerBoundsMode: 'none'と、軸ごとのnameMoveOverlap: falseで以前の配置に戻せます。

3つ目はリッチテキストのラベルです。richの中のフォントの大きさや太さが、通常ラベルの同じ指定を継承するようになりました。ラベル内の一部だけ文字を大きくしていた画面では、richInheritPlainLabel: falseを指定すれば5系と同じ表示になります。移行後は、凡例の位置、軸の余白、ラベル内の文字の大きさの3点を画面で見比べると漏れを防げます。

6.0で増えたグラフと座標系：Chord・Matrix・軸の分断

見た目の変更だけでなく、6系で選べるようになった表現もあります。6.0の新機能一覧には、関係を弧で結ぶChordグラフ、表の形にグラフを並べるMatrix座標系、桁違いの値を1本の軸に収める軸の分断（Broken Axis）が並んでいます。インスタンスを作り直さずにテーマを切り替える機能と、OSの明暗設定に合わせるダークモードも加わりました。

5系で同じ表現を作るには、カスタム系列を自作するか、グラフを複数並べて位置を手で合わせる必要がありました。これらが要件に入っている新規案件なら、5系を選ぶ理由はありません。

Chart.js・Recharts・BIツールと比べたEChartsの採用条件と見送り場面

選び分けは、描画方式・扱う点数・必要なグラフの種類・配信サイズの4軸で決まります。2026年10月29日時点のnpmの版とあわせて整理します。

描画方式・扱える点数・グラフの種類を判断軸に並べた4択の比較表

「向く点数」は描画方式と間引き機能から見た目安で、計測値ではありません。Rechartsは描画時の間引きを持たず、アプリ側で点数を減らす必要があります。EChartsとChart.jsの差は、前章のlargeのような大量データ専用の描画モードと、地図・関係図まで含むグラフの幅にあります。

EChartsを選んでよい条件とChart.jsやRechartsへ回す条件

EChartsで決めてよいのは、次のどれかが要件にある案件です。1系列で数万点を超えるデータをズームしながら見る、地図・ヒートマップ・サンキー図・Chordのような標準外の図形を使う、複数のグラフを範囲選択で連動させる。この3つはChart.jsでもプラグインで近づけますが、部品の組み合わせが増えるほど保守の手間はEChartsのほうが小さくなります。

反対に、折れ線・棒・円を数枚並べるだけの管理画面ならChart.jsで足ります。画面がReactで統一され、ツールチップをJSXで書いて他のUI部品と見た目を揃えたいなら、RechartsのSVG描画の限界とChart.jsとの選び分けで扱った条件に当てはまるかを先に確かめてください。Next.jsのApp Routerで使う場合、EChartsはブラウザのDOMとCanvasに触れるため、‘use client’ディレクティブを書いたクライアントコンポーネントに置きます。サーバー側とブラウザ側の分け方はApp Routerのファイル規約とPages Routerとの違いで解説しています。

グラフを自作せずBIツールで済ませたほうがよい画面の見分け方

EChartsは表現力が高いぶん、「BIツールで済む画面」まで作り込んでしまいがちです。閲覧者が軸や集計単位、期間を自分で組み替えたい画面は、ライブラリで作るのを見送ってください。切り口が1つ増えるたびにAPIと画面の改修が発生し、費用が積み上がります。社内の分析用途ならOSSのBIでも始められ、料金と商用利用の範囲はMetabaseの料金と使い方で整理しています。

EChartsで作るべきなのは、受注や設備の稼働といった業務の流れの中で決まった指標を、決まった形で見せる画面です。両者の線引きは予実管理ダッシュボードの作り方とBI・個別開発の判断で具体例を交えて扱いました。BIツールで済ませるか、EChartsで業務システムに組み込むかの判断から相談したい場合は、BIツール導入支援で要件の整理を受け付けています。

EChartsの導入前に確認されるライセンス・版・周辺連携のよくある質問

導入の検討段階でよく出る質問を5つ取り上げます。

EChartsは商用のWebサービスでも無料で使えますか？

商用のWebサービスでも利用可能です。EChartsはリポジトリのLICENSEどおりApache License 2.0で、npm registryの6.1.0のメタデータにもApache-2.0と記載されています。商用サービスへの組み込みや改変も認められています。再配布するときは、ライセンス文の同梱と、改変したファイルへの変更の明示が条件です。描画層のzrenderはBSD-3-Clauseで、こちらも商用利用を妨げません。バンドル時にライセンスコメントを消さない設定にしておくと、監査で慌てずに済みます。

EChartsとChart.jsはどちらを選べばよいですか？

標準的な折れ線・棒・円を数枚並べるだけならChart.jsです。gzip後の配信サイズは全部入り同士でChart.jsが約70.8KB、EChartsが369,392バイトで、軽さではChart.jsが勝ちます。1系列で数万点を超える、地図や関係図が要る、ズームとグラフ間の連動が要る、のどれかに当てはまるならEChartsを選んでください。迷う場合は、扱う点数の上限と必要なグラフの種類を先に一覧にします。

EChartsで3Dのグラフや地球儀は描けますか？

本体だけでは描けません。拡張パッケージのecharts-gl（2026年5月28日公開の2.1.0・MIT）を追加すると、3Dの散布図や棒グラフ、地球儀の表現が使えます。peer依存はechartsの5.1.2以上または6系です。3D表示はWebGLで動くため、古い端末や仮想デスクトップ環境では表示できない場合があります。WebGLの対応状況の確かめ方はWebGLの仕組みと対応ブラウザの確認で解説しています。

EChartsのグラフをサーバー側で画像として出力できますか？

できます。公式のサーバーサイドレンダリングの手順では、Node.jsでecharts.init(null, null, { renderer: 'svg', ssr: true, width: 600, height: 320 })のように初期化し、renderToSVGStringでSVGの文字列を得ます。5.3.0で入った方式で、外部の依存は要りません。5.5.0からは、ブラウザ側で4KB未満の軽量ランタイムを読み込むだけでツールチップなどの操作も付けられます。帳票のPDFやメールに埋め込むグラフを作る用途に向きます。

EChartsはVueやAngularでも使えますか？

VueやAngularでも利用可能です。EChartsはフレームワークに依存しないので、DOM要素を1つ渡せばどの画面にも置けます。Vueなら本文で触れたvue-echarts、Reactならecharts-for-reactがあり、初期化と破棄を部品側で処理してくれます。ReactとVueのどちらで画面を作るかがまだ決まっていない段階なら、ReactとVue 3の違いで先にフレームワークを決めてから、グラフのラッパーを選んでください。

関連記事

• Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け：軽さを優先するときの導入コードと間引き設定を確認できます
• Rechartsとは？3.10系の導入コードとSVG描画の限界・Chart.jsとの選び分け：React専用のSVG描画を選ぶ条件を比べられます
• BIツールとは？できること・ダッシュボードでの可視化・選定軸を解説：グラフを自作するかBIを入れるかを決める前提知識です
• 経営ダッシュボードとは？指標の決め方・データ連携・構築方式で判断する導入の基準：グラフを並べる画面全体の設計に進むときに役立ちます
• Metabaseの料金と使い方｜無料OSS版と有料プランの価格差・商用利用とライセンスの範囲【2026年版】：OSSのBIで済ませる場合の費用と範囲を確かめられます