EChartsで凡例をカスタマイズしよう

EChartsとは

The Apache Software Foundationの元で開発がされているグラフライブラリです。
もともとはBaiduが開発をしていました。
https://echarts.apache.org/

ライセンスはApache License Version 2.0です。

デモを見ていただくのが早いのですが、グラフの種類が多く、また表現力が高く細かなカスタマイズが効くという点でいまのプロジェクトで利用しています。
https://ecomfe.github.io/echarts-examples/public/index.html

やりたかったこと

公開されているデモがあれば十分だったのですが、追加で工夫したいことがあったので2つ紹介します。

1. 凡例をボーダーで囲ってボタンのように見せたい
2. ２つのグラフを１つの凡例でまとめたい

ボタンのように見せる

DEMOの折れ線グラフそのままですが、普通に書くと以下のようになります。

option = {
  legend: {
    show: true,
    data: [{
      name: '売上'
    }]
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    name: '売上'
  }]
};

これをレンダリングするとこうなります。

ここでrichオプションとformatterをうまく使ってやることで、凡例をボタンのように見せることができます。

legendの部分だけ抜粋

  legend: {
    show: true,
    data: [{
      name: '売上',
      icon: 'none', // デフォルトのアイコンは消さないと文字部分だけボーダーが入る
      textStyle: {  // スタイルを変更する
        padding: [8, 12],
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 20,
        rich: {
          sales: { // formatterで指定するキーに対するスタイル。これは何でもよい
            width: 10,
            height: 10,
            borderRadius: 5,
            borderColor: '#b63a37',
            borderWidth: 2
          }
        }
      }
    }],
    // formatterでグラフに描画される文字列を変更することができる
    formatter: function(name) {  // ここのnameは dataで指定したnameです。この場合は「売上」
      return '{sales|} ' + name; // salesはrichで指定したものと同じにしておくこと
    }
  },

これにより、formatterで指定された {sales|} 売上 というラベルに対して、 {sales|} 部分に縦横10pxの赤円が描写されます。これをrichで指定するわけですね。

textStyleは凡例全体のスタイルになるので、borderColorに灰色とborderRadiusを指定してあげることで上記の見た目を作ることができます。

なお、今回はcssで赤い丸を作ってしまいましたが、自前のsvgや画像に差し替えることもできます。
その場合はrichオプションのbackgroundColorを画像にしてやりましょう。

rich: {
  a: {
    backgroundColor: { image: '画像ファイルへのpath' }
  }
}

richオプション最強

２つのグラフを１つの凡例でまとめたい

あまりこういった使い方はされないと思いますが、1つの凡例を２つのグラフに関連づける場合は、seriesで定義するnameを同じものにするという手があります。

option = {
  legend: {
    show: true,
    data: [{
      name: '売上',
      icon: 'none',
      textStyle: {
        padding: [8, 12],
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 20,
        rich: {
          current: {
            width: 10,
            height: 10,
            borderRadius: 5,
            borderColor: '#f00',
            borderWidth: 2
          },
          prev: {
            width: 10,
            height: 10,
            borderRadius: 5,
            borderColor: '#00f',
            borderWidth: 2
          }
        }
      }
    }],
    formatter: function(name) {
      return '{current|} 今週の売上 {prev|} 先週の売上';
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    name: '売上',  // 今週の売上分 = 「売上」のnameにしておく
    itemStyle: {
      normal: {
        color: '#f00'
      }
    }
  }, {
    data: [420, 700, 840, 1080, 1000, 1111, 1450],
    type: 'line',
    name: '売上',  // 先週の売り上げ分 = 「売上」のnameにしておく
    itemStyle: {
      normal: {
        color: '#00f'
      }
    }
  }]
};

これで凡例にマウスオーバーすると２つのグラフがアクティブ化されます。

最後に

Echartsはカスタマイズ次第で非常にきれいなグラフが作れるためオススメです。
richとformatterを使いこなせれば大抵の表現はなんとかなります。
ほかにも小手先でのテクニックを使っていたりするので別途記事化したいと思います。