Apache ECharts：ブラウザーで対話的なチャートを描く

ECharts が描くデータ表現

README の冒頭では、Apache ECharts を、商用製品に直感的でインタラクティブかつ高度にカスタマイズ可能なチャートを追加するための、無料で強力なチャート・可視化ライブラリと説明しています。このライブラリは純粋な JavaScript で書かれ、軽量な canvas ライブラリである zrender をベースにしていると述べています。リポジトリのメタデータでは主要言語が TypeScript となっており、README の表現とは別の情報です。プロジェクトのホームページは echarts.apache.org で、README には中国語と英語の公式サイトへのリンクがあります。メタデータのスナップショットでは、スター数 66,983、フォーク数 19,814、未解決 issue 数 1,564、デフォルトブランチは master、アーカイブはされていません。また、README の冒頭にはパフォーマンスのベンチマークやユーザー数は記載されておらず、これらの情報は他のソースで確認する必要があります。

option と series の組み立て

README には ECharts を取得する方法が 3 つあります。公式サイトからのダウンロード、npm install echarts --save の実行、jsDelivr CDN の利用です。CDN のパッケージパスは dist と示されていますが、具体的な script タグやバージョン指定は示されていません。npm コマンドは README からそのまま引用されています。これ以外のパッケージマネージャーやミラー、オフラインインストールファイルは言及されていません。公式ダウンロードページの URL は https://echarts.apache.org/download.html ですが、そこで提供されるファイル形式や、ダウンロードファイルの完全性を検証する方法は README にありません。ダウンロードリンクはハイパーリンクテキストとして存在し、コマンドや API 呼び出しとしてではありません。

tooltip、legend、dataZoom の操作

ドキュメントのリンクには、Get Started ハンドブック、API リファレンス、Option Manual、Examples があります。それぞれの URL は /handbook、/api.html、/option.html、/examples です。サポートについては、README はバグ報告と機能要求を GitHub Issues に、一般的な質問を dev@echarts.apache.org に、プロジェクトの更新情報をメーリングリストのページに誘導しています。応答時間、issue の優先順位、メーリングリストのアーカイブ場所は記載されていません。また、公式フォーラムやチャットグループへの言及もありません。コミュニティサポートの現状は外部で確認する必要があります。ドキュメントセクションには、例のソースプレビューや、Option Manual がすべての設定項目を網羅しているかどうかの説明はありません。

Canvas と SVG の選択

ソースをビルドするには Node.js が必要です。README には一連の npm コマンドがあります。npm install で依存関係をインストールし、npm run dev は監視モードでソースを再ビルドして ./test ディレクトリを開き、-cases.html でテストケースの一覧を確認できます。npm run checktype は TypeScript コードの正しさをチェックし、npm run release は dist ディレクトリに本番ファイルを生成します。README には Node.js の最小バージョン、OS、ビルドツールチェーンの指定はありません。また、テストケースの作成方法を学ぶための npm run mktest:help にも言及していますが、テストフレームワークの詳細はありません。コマンドはリポジトリのルートで実行することを想定していますが、Windows や macOS での追加設定については触れていません。

大きなデータの変換と描画

README には複数の拡張機能が列挙されています。ECharts GL は 3D プロット、地球可視化、WebGL アクセラレーションを提供し、Liquidfill は水玉チャート、Wordcloud はワードクラウド、Baidu Map 用の拡張、vue-echarts は Vue.js コンポーネント、echarts-stat は統計ツールです。さらに Awesome ECharts へのリンクもあります。各拡張機能について、README はリンクと短い説明のみを提供しており、インストール方法や使用法はありません。Baidu Map 拡張機能はリポジトリの extension-src/bmap にありますが、コンパイルやインポートの方法は説明されていません。vue-echarts は Vue.js のコンポーネントと説明されていますが、バージョン互換性の情報はありません。拡張機能の一覧には、各プロジェクトのライセンスやメンテナンス状況は記載されていません。

公式例を自分の画面へ移す

ECharts は Apache License Version 2.0 の下で利用可能です。ライセンス抜粋は、複製、派生作品の作成、公開表示、公開演奏、再許諾、配布を行うための永続的、全世界的、非独占的、無償、ロイヤリティフリーの著作権ライセンスを付与し、本文に規定された条件の下で同様の特許ライセンスを付与します。また、派生作品や貢献という用語を定義し、特許訴訟を提起した場合に特許ライセンスが終了する条項を含んでいます。抜粋には保証、サポート、セキュリティについての記述はありません。標準的な Apache ライセンスには通常免責条項がありますが、ここで示した抜粋はその前に終わっています。そのため、保証と責任の完全な条項はライセンス全文で確認する必要があります。

Apache-2.0 と採用判断

README は、ローカルでデバッグしたり pull request を送りたい人のために、貢献ドキュメントと Apache Code of Conduct へのリンクを提供しています。また、一般的な質問用のメーリングリストも挙げています。ECharts に関する論文「ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization」は Visual Informatics 2018 年に掲載され、著者には Deqing Li、Honghui Mei、Yi Shen、Shuang Su、Wenli Zhang、Junting Wang、Ming Zu、Wei Chen が含まれます。README はこの論文が現在のバージョンのライブラリを対象としているかどうかを述べていません。貢献ガイドのリンクはリポジトリ内の CONTRIBUTING.md を指していますが、その内容は引用されていません。

ECharts は公式の最小例を一つの HTML または npm プロジェクトへ固定し、option、series、axis、tooltip を順に変更します。実データへ置き換えた後は初期描画、コンテナー resize、legend の切り替え、dataZoom、空配列、欠損値を確認し、ブラウザーの Console と描画時間を保存します。renderer を Canvas と SVG で切り替え、同じ画面サイズとデータでイベント、文字、画像出力の差を比較してから採用範囲を決めます。

編集部の結論

ブラウザー上で折れ線、棒、地図などの対話的な可視化を作り、ズームや tooltip をデータに合わせて制御したいフロントエンド開発者に向きます。サーバー側の BI、データ収集、正規化、アクセシビリティ審査まで自動で担う製品を探す人には向きません。先に公式例の option を最小データへ置き換え、初期描画、resize、tooltip、legend、SVG と Canvas の差を対象ブラウザーで記録してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes