ハクソク

世界を動かす技術を、日本語で。

Apache ECharts 6

294日前原文(echarts.apache.org)

概要

  • Apache ECharts 6.0 がリリースされ、12年の進化の集大成を発表
  • 12の大規模アップグレードで データ可視化の限界を突破
  • プロフェッショナルなビジュアル表現、データ表現の拡張、自由な構成力を強化
  • 新テーマ、ダークモード、新チャート、カスタム機能などを実装
  • 次世代のデータ駆動型アプリケーション 開発の基盤を提供

Apache ECharts 6.0：12年の進化と12大アップグレード

  • ECharts は12年前にGitHubで公開され、オープンソースの可視化ツールとして世界中に普及
  • シンプルなグラフ描画ツールから、 モバイル・大画面・サーバーサイド まで対応する技術体系へ成長
  • 6.0 の開発方針は「強力かつエレガントな複雑データ表現の追求」
  • 3つのコア軸で進化
    • プロフェッショナルなビジュアル表現
    • データ表現の拡張
    • 自由な構成力の解放
  • 12のアップグレードで、 堅牢さ・安定性・拡張性 を兼ね備えた基盤を構築

12大アップグレードの概要

よりプロフェッショナルなビジュアル表現

  • 新デフォルトテーマ ：モダンなデザイン言語で統一感と美しさを実現
  • 動的テーマ切替 ：実行時にシームレスなテーマ変更が可能
  • ダークモード対応 ：システムのダーク/ライトモードに自動適応しUX向上

データ表現の限界突破

  • 新Chordチャート ：複雑な関係性・分布を直感的に可視化
  • 新Beeswarmチャート ：重複点をハニカム状に展開し視認性向上
  • 新Scatterジッタリング ：散布図の密集データも判別しやすく
  • 新Broken Axis ：大きな数値差を直感的に見せる破線軸
  • 強化された株式取引チャート ：ラベル機能や分析用チャートを拡充

構成の自由度を解放

  • 新マトリックス座標系 ：表のようにグラフやコンポーネントを自在に組み合わせ
  • 強化カスタムシリーズ ：npm公開・動的登録でコード再利用性を向上
  • 新カスタムチャート ：バイオリン・等高線・ステージ・バーレンジ・ラインレンジ等を追加
  • 軸ラベル最適化 ：ラベルの重なり・はみ出しを自動で防止

各アップグレードの詳細

1. 新デフォルトテーマ

  • 全体の70%以上 の開発者がデフォルトテーマを使用
  • デザイントークン による配色・余白などの再設計
  • v5.xスタイル維持用の v5.jsテーマファイル も提供

2. 動的テーマ切替

  • 旧バージョンでは インスタンス再生成が必要 だったテーマ切替を一新
  • アニメーションの繰り返し負荷を解消 し、UXを大幅改善

3. ダークモード対応

  • システムのダークモード検知 によりテーマを自動切替
  • ビジネスアプリの ダークモード対応をシンプルに実現
  • 例：window.matchMedia('(prefers-color-scheme: dark)')で監視し、setThemeで切替

4. 新Chordチャート

  • 金融取引・ソーシャルネットワーク 等、複雑な関係可視化に最適
  • グラデーションエッジ で独自のビジュアル表現
  • 詳細は series-chord を参照

5. 新Beeswarmチャート

  • カテゴリ軸での重複点を非数値方向に分散配置
  • jitter を非ゼロ、 jitterOverlap をfalseで有効化

6. 新Scatterジッタリング

  • 密集データの視認性向上、パフォーマンスも優秀
  • jitter を非ゼロ、 jitterOverlap をtrueで有効化

7. 新Broken Axis

  • 大きな数値差を持つデータの視覚化 を革新的に実現
  • 破れ紙風エフェクト や クリックで元比率復元 に対応

8. 強化された株式取引チャート

  • ラベルの座標系相対配置 でプロ仕様の分析ツール作成が容易
  • MACD・ボリューム・板情報・深度チャート 等を組み合わせ可能
  • relativeTo で四隅表示など柔軟なレイアウト

9. 新マトリックス座標系

  • 共分散行列や周期表 などの特殊レイアウトに対応
  • 複数グラフ・コンポーネントの柔軟な組み合わせ が可能

10. 強化カスタムシリーズ

  • renderItemの標準化・再利用性向上
  • npmでの公開・動的登録 が可能
  • 公式プロジェクト：https://github.com/apache/echarts-custom-series

11. 新カスタムチャート

  • バイオリン・等高線・睡眠ステージ・分割ドーナツ・バーレンジ・ラインレンジ 等6種を公式提供
  • echarts-custom-series で利用・拡張可能

12. 軸ラベル最適化

  • 長いデータでもはみ出し・重なりを自動調整
  • ユーザーによるスペース予測不要 で運用性向上

アップグレードガイド

  • 完全なchangelogとアップグレード手順 は公式ドキュメント参照
  • 既存プロジェクトの移行もサポート する情報を提供

Apache ECharts 6.0 は、 「無限のチャート表現力」 を開発者に提供し、ビジネス・研究・教育などあらゆる分野で 次世代のデータ可視化体験 を実現。

Hackerたちの意見

Echartsは、フル機能のソリューションが必要なときに最適なチャートライブラリだよ。これを知っておくと、バンドルサイズを減らせるよ：https://echarts.apache.org/en/builder.html

└

バンドラーを使ってインポートすれば、必要な機能だけを部分的にインポートしてインストールすることもできるよ：https://apache.github.io/echarts-handbook/en/basics/import/#...

彼らの新しいコードチャートは、今まで見た中で一番わかりやすいコードチャートだね。方向を示す矢印付きのツールチップや、はっきりしたグラデーションがあるよ。

Echartsは好きなんだけど、機能を拡張するのがちょっと難しいと感じてる。ガントチャートが欲しかったんだけど、達成できたものの、ソースを掘り下げてログをあちこちに入れなきゃいけなかった。Ant Designを使ってるけど、同じような問題があったよ。ちょっとごちゃごちゃしてるし、翻訳もイマイチだけど、続けるつもり。

└

APIの一部は最近のバージョンアップでちょっと混乱するけど、それでもD3じゃないオープンソースライブラリの中では最もパワフルだと思う。

└

Echartsと一緒にAnt Designも使ってる。デザイナーにすべてのチャートでグラデーションを使わないようにするのが楽しかったよ。Echartsは_一部_のグラデーションをサポートしてるけど、特定のチャートタイプではかなり面倒だった。StepForm Wizardコンポーネントを使いたくてAnt Design Pro Formsを使ったのも失敗だった。tsdocsは中国語だし、例の使い方以外はほとんどドキュメントがないからね。:'}

後方互換性を保ってくれてるのは素晴らしいね。大きなリリースを見るのはいつもドキドキするし、react-routerのトラブルに何度もやられたからね。5.6から6.0に大きなプロジェクトを移行するのに（チャートタイプは10種類、合計約1000チャート）15分くらいで済んだかな。確か、唯一の破壊的変更はレジェンドが下に移動したことだけど、古いテーマをインポートすれば簡単に元に戻せたし。それが全部無料でできたんだから、商用ライブラリを使ってたのは約1年前までで、Echartsに移行してから後悔はしてないよ。

└

react-routerは本当にひどい。最もイライラするけど、どこにでもあるパッケージの一つだね。今、react-router v6を使ってるプロジェクトをTanstack Routerに移行するつもりで、v7の移行には関わりたくないな。

└

Reactエコシステムのマゾヒズムにはもう耐えられないから、市場価値が下がってる気がするけど、ウェブコンポーネントに移行できて本当に楽になったよ。理由もなく常に変わるプロジェクトには耐えられないね。

eChartsがどこかで言及されるのを見ると、いつもワクワクするよ。洗練されたデータ集約型のチャートを作るための機能が豊富で、完璧なソリューションなんだ。他の商業的な代替品は比較にならないね。

いろんなライブラリを試してきたけど、Echartsが一番だと思う。速いし、機能も充実してるし、始めやすいし、デフォルトで見た目もいいし、良いサンプルもある。サーバーとクライアントのレンダリングもできるし、SVGとキャンバスにも対応してる。ただ一つ不満なのは、チャートデータのデータ構造かな。チャートの種類ごとに異なる構造と軸データ構造が必要なんだ。データテーブル機能（列と行）も追加されたけど、あまりドキュメントが整ってなくて、前に試したときは不完全だった。

過去15年間、いろんなJSチャートライブラリをいじってきたけど、結局Echartsに戻ってくるんだ。他のライブラリは、ちょっとしたことをしようとすると必要なオプションが欠けてることが多い（例えば、最後に試したやつは複数のY軸に対応してなかった）。機能は充実してるのに、D3でゼロからチャートをコーディングする複雑さがないのがいいね。Reactとも相性がいいよ。

3年前にたくさんのチャートフレームワークを評価して、echartsを選んだんだ。リアルタイムデータベースの可視化に使ってて、10フレーム以上/秒でチャートを表示してるよ：https://www.timestored.com/pulse/ これは素晴らしい選択だった。実現できなかった重要な機能が一つあったけど、GitHubの問題を再確認したら、修正がマージされたみたいだから、アップグレードしなきゃ。素晴らしい仕事だね。ありがとう。

└

興味がある人のために、週末とランチタイムの軸のブレークについて：https://github.com/apache/echarts/issues/12796

インタラクティブな3Dプロットはできるの？