はじめに

本記事はARISE analytics Advent Calendar 2022の6日目です。
昨日は@e_onさんの「元法学部生と読むLegal NLP」でした。
明日は@tsukasaIさんの「作業中の変更を一時退避させる git stash ハンズオン」です。

Apache EChartsを使用する機会がありましたので、今回はApache EChartsの簡単な使い方について紹介しようと思います。

Apache EChartsとは？

お手軽にリッチなグラフ描画が出来る、オープンソースライブラリです。
少し触ってみただけでもカスタマイズの幅の広さを感じ、思い通りのグラフデザインにしやすい印象を受けました。

公式サイトはこちらです。
https://echarts.apache.org/

インストール

ライブラリの導入方法はいくつかあります。今回はお手軽に利用したいのでCDN経由で導入しようと思います。
ソースURLは下記

https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js

その他の導入方法については、下記ページを参照ください。

とりあえず使ってみる！

利用準備

まずは新たにindex.htmlを作成して、ライブラリをインポートとグラフ描画用のコンテナを配置しましょう。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
  </head>
  <body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  </body>
</html>

グラフ描画

グラフ描画用のコードを書きます。基本的には下記の流れです。

echarts.init()で描画対象を指定して初期化
表示する内容やデータを定義
定義した設定をsetOption()にて指定

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
  </head>
  <body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'ECharts Getting Started Example'
        },
        tooltip: {},
        legend: {
          data: ['sales']
        },
        xAxis: {
          data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      myChart.setOption(option);
    </script>
  </body>
</html>

これで完了です！実際に表示してみましょう。

index.htmlを開くと、棒グラフが表示されると思います。簡単！

下記に、それぞれのオプションがどの設定にあたるのか記載します。

title：グラフのタイトル表示設定
tooltip：グラフにマウスオーバーした時に表示されるツールチップの表示設定
legend：凡例に関する設定
xAxis：x軸に関する表示設定
yAxis：y軸に関する表示設定
series：実際に表示するグラフの設定

オプションについては下記ドキュメントにまとめられています。かなりカスタマイズの幅が広そうです。

その他のグラフ表示

折角なので、他にも基本的なグラフ表示のコードを紹介します。

線グラフ

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
  </head>
  <body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      myChart.setOption(option);
    </script>
  </body>
</html>

円グラフ

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
  </head>
  <body>
    <div id="main" style="width: 600px;height:600px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    </script>
  </body>
</html>

グラフの種類はseries内で設定が可能です。
また、複数種類のグラフの複合も可能です。

実際にApache Echartsを使ってどこまで表現できるかについては、サンプルを参照していただくのが一番早いかと思います。
参考になるサンプルから、使わなさそうだけど面白いサンプルまで色々あります。

最後に

今回はApache Echartsと、すぐに使えるサンプルをいくつか紹介させていただきました。
自分自身も使い始めたばかりで幅広いカスタマイズ性を使いこなせてはいないですが、本当に簡単にリッチなグラフ描画が可能ですので、一度このお手軽さと楽しさに触れてみていただければと思います。