ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。

そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。

EChartsの使い方

今回はその多様なグラフ、チャートを紹介します。

曲線のグラフ。
曲線のグラフ。

積み上げグラフ。
積み上げグラフ。

棒グラフ。
棒グラフ。

エリアグラフ。
エリアグラフ。

曲線。かなり複雑です。
曲線。かなり複雑です。

こちらもユニークです。途中で途切れています。
こちらもユニークです。途中で途切れています。

棒グラフですが、範囲が指定できています。
棒グラフですが、範囲が指定できています。

左右の比較グラフ。
左右の比較グラフ。

複数グループの棒グラフ。
複数グループの棒グラフ。

散布図。
散布図。

こちらも散布図。
こちらも散布図。

画像も合わせた表示。
画像も合わせた表示。

散布図と色の組み合わせ。
散布図と色の組み合わせ。

ローソクチャート。
ローソクチャート。

円グラフ。
円グラフ。

より描画にこだわった円グラフ。
より描画にこだわった円グラフ。

レーダーチャート。
レーダーチャート。

このようなパターンも。
このようなパターンも。

こちらもかなり複雑ですね。
こちらもかなり複雑ですね。

細かすぎてここからトレンドを見いだすのは大変そうです…。
細かすぎてここからトレンドを見いだすのは大変そうです…。

枝分かれしたチャート。
枝分かれしたチャート。

組織図。
組織図。

地図との組み合わせ。
地図との組み合わせ。

人の体。
人の体。

サッカー。アニメーションします。
サッカー。アニメーションします。

ゲージ。
ゲージ。

横向きの対比。
横向きの対比。

イベントリバーと書かれています。
イベントリバーと書かれています。

異なるグラフを合わせることもできます。
異なるグラフを合わせることもできます。

EChartsはシンプルなグラフのみならず、こだわったチャートを作成することもできます。テーマ機能もあって、色の変更も簡単です。百度のエンジニアが開発しているようで、性能面においても十分と期待できそうです。非常に高性能で面白いチャートライブラリになっています。

EChartsはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

ECharts · Home

ecomfe/echarts

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2