EChartsでgridを使うための基本概念

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

EChartsを使い複数のグラフを表示したくてgridを使おうと思ったけど、ドキュメントを見ても使い方がよくわからず調べたのでメモ

まず概念、部品を理解する

どういう概念、部品があるかを理解するとわかりやすいです。
gridとxAxis,yAxisとseriesの3つの概念/部品をわかっておけばいいでしょう。

gridはチャートを描く土台となる部分。
xAxis,yAxisはgridの横についている目盛り部分。
seriesは実際のチャート部分 (折れ線グラフだったら線の部分)。

これだけわかっていれば良いと思います。

これら3つが組み合わさって1つのグラフを作ります。
組み合わせ方 (ひも付き方) は、gridがあって、gridにxAxisとyAxisがついていて、xAxisとyAxisにseriesがつく、という形です。

実例

EChartsの公式ページの↓のグラフを例にして説明します。
https://echarts.apache.org/examples/en/editor.html?c=line-gradient

コード抜粋

説明のため、上のリンクの例のoption部分のみを抜き出し、さらにコメントを追加したものが↓になります。

2つの折れ線グラフを定義するためのoptionです。見てわかるように、gridを2つ定義し、それらにxAxis, yAxisを定義して紐付けて、さらにseriesをxAxis, yAxisに紐付けるようにしています。


option = {
    // gridを2つ定義する。
    grid: [{ 
        bottom: '60%' // 1つ目のgridを定義
    }, {
        top: '60%' // 2つ目のgridを定義
    }],
    // xAxisを2つ定義してgridと紐付けます
    xAxis: [{
        data: dateList
        // gridIndexを指定しないと0を指定したのと同じ
        // 上で定義したgridのインデックスが0(つまり1番目)のgridを紐付けることになります
    }, {
        data: dateList,
        gridIndex: 1 // インデックスが1のgridに紐付ける
    }],
    // yAxisを2つ定義してgridと紐付ける
    yAxis: [{
        splitLine: {show: false} // gridIndexを指定しないと0を指定したのと同じ
    }, {
        splitLine: {show: false},
        gridIndex: 1 // インデックスが1のgridに紐付ける
    }],
    // seriesを2つ定義してxAxisとyAxisに紐付ける
    series: [{
        type: 'line',
        showSymbol: false,
        data: valueList
        // xAxisとyAxisを指定しないと、どちらもインデックス0を指定したことになります。
        // なので、上で定義したxAxisとyAxisどちらもインデックス0のものを紐付けることになります。
    }, {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 1, // インデックス1のxAxisIndexを紐付ける
        yAxisIndex: 1  // インデックス1のyAxisIndexを紐付ける
    }]
};