EChartsの軸ラベルをリンクっぽく装飾する

5510 ワード
ECharts ECharts テキストリンク

はじめに

需要があるのかわからないシリーズ

普段グラフライブラリにEchartsを使ってるんですが、Y軸とかX軸のラベルをHTMLで装飾するすことはEchartsではできないようになっています。
今回、ラベルをリンクのように見せたい事情があり、無理やり実装したというエントリです。

方法

borderのオプションは用意されているものの、四方そぞれぞれ個別に設定ができないので下線を引くことはできないんです。
ただ、heightを1にしてあげたうえでbackgroundColorを指定してあげると線として見せることができます。
これをうまく使ってあげれば下線を引けそう。

option = {
    xAxis: {
        type: 'category',
        data: ['月', '火', '水', '木', '金', '土', '日'],
        axisLabel: {
            color: '#00f',
            // richをうまく使います。改行したあとにダミーのboxを用意
            formatter: function(n) {
                return n + '\n{box|}';
            },
            rich: {
                // 高さ1pxにしてあげて塗りつぶしてあげる
                box: {
                    height: 1,
                    width: 16,
                    backgroundColor: '#00f'
                }
            }
        },
        // ラベルもマウスイベント拾えるようにする
        triggerEvent: true
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
}

こんな感じになる

あとはイベントを拾ってlocation.hrefで飛ばしてあげる

myChart.on('click', function (params) {
    console.log(params);
});

さいごに

細かいところまでカスタマイズできるグラフライブラリあれば教えてください :pray: