EChartsなら1000万件のデータもサクサク描ける話

はじめに

ダッシュボードを作るとき、グラフの実装って地味に面倒なんですよね。Chart.jsで済む場合もあるけど、もう少し凝ったことをしたいとか、大量データを扱いたいときに物足りなさを感じることがあります。

そこで今回紹介するのがApache ECharts。GitHubスター数6万5千超え、月間600万ダウンロードという実績を持つ、Apacheプロジェクトのデータビジュアライゼーションライブラリです。

個人的には、「とりあえずこれ入れとけば大抵のグラフは作れる」という安心感があるライブラリだと思っています。

特徴・メリット

20種類以上のチャートタイプ

棒グラフ、折れ線、円グラフといった基本はもちろん、ヒートマップ、サンバースト、ツリーマップ、さらには3Dチャートまで対応しています。12種類のコンポーネントと組み合わせることで、かなり複雑な可視化も実現できます。

大量データ処理に強い

これが一番の推しポイントなんですが、1000万件のデータをリアルタイムで描画できます。プログレッシブレンダリングとストリーム読み込みに対応しているので、大規模なデータセットでもブラウザが固まることなく表示できます。

業務システムで「過去5年分のデータを一括表示したい」みたいな要件が来ても、EChartsなら対応できる可能性が高いです。

Canvas/SVG両対応

レンダリングエンジンをCanvasとSVGで切り替えられます。大量データならCanvas、印刷品質が必要ならSVGという使い分けができるのは便利ですね。

宣言的なAPI設計

オプションオブジェクトを渡すだけでグラフが描ける宣言的な設計になっています。JSONで設定を管理できるので、サーバーからグラフ設定を取得して動的に描画するようなケースにも向いています。

アクセシビリティ対応

最近のライブラリらしく、スクリーンリーダー向けの説明文を自動生成してくれます。アクセシビリティ要件がある案件でも安心して使えます。

インストール方法

npm経由（推奨）

npm install echarts --save

CDN経由

手軽に試したいならCDNでも使えます。

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

バンドルサイズについて

フル版だと383KB（minified + gzipped）とそこそこのサイズになります。必要なモジュールだけインポートする方法もあるので、本番環境ではそちらを検討した方がいいかもしれません。

基本的な使い方

シンプルな棒グラフ

import * as echarts from 'echarts';

// コンテナ要素を取得してインスタンス化
const chart = echarts.init(document.getElementById('chart'));

// オプションを設定
const option = {
  title: {
    text: '月別売上'
  },
  tooltip: {},
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {},
  series: [
    {
      name: '売上',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    }
  ]
};

// 描画
chart.setOption(option);

これだけでツールチップ付きの棒グラフが完成します。正直、この手軽さはかなり魅力的です。

複合グラフ

折れ線と棒グラフを組み合わせるのも簡単です。

const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['売上', '前年比']
  },
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: [
    { type: 'value', name: '売上（万円）' },
    { type: 'value', name: '前年比（%）' }
  ],
  series: [
    {
      name: '売上',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: '前年比',
      type: 'line',
      yAxisIndex: 1,
      data: [105, 120, 98, 85, 90, 115]
    }
  ]
};

レスポンシブ対応

ウィンドウリサイズへの対応も簡単です。

window.addEventListener('resize', () => {
  chart.resize();
});

実践的なユースケース

ダッシュボード構築

管理画面のダッシュボードは、EChartsの最も一般的な使い道ですね。売上推移、ユーザー数の変動、カテゴリ別の構成比など、複数のグラフを並べて表示するケースに向いています。

データ連携の方法としては、REST APIからJSONでデータを取得してsetOptionで更新するパターンが多いと思います。

リアルタイムモニタリング

WebSocketと組み合わせて、サーバーのメトリクスやIoTセンサーのデータをリアルタイム表示するような使い方もできます。appendDataメソッドを使えば、既存のデータに追加する形で効率的に更新できます。

地図可視化

ECharts GLを使えば、地図上にデータをプロットすることも可能です。店舗の売上を地図上にヒートマップ表示するとか、配送ルートを可視化するとか、そういった用途にも対応できます。

React/Vueで使う場合

素のJavaScriptでも使えますが、フレームワークと組み合わせる場合は公式のラッパーライブラリを使うと楽です。

React

npm install echarts-for-react

import ReactECharts from 'echarts-for-react';

function Chart() {
  const option = {
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [10, 20, 30] }]
  };

  return <ReactECharts option={option} />;
}