Bootstrap：多機能なグラフ描写が可能な『ECharts』の取扱いを調べた

Bootstrap：多機能なグラフ描写が可能な『ECHARTS』の取扱いを調べた

Gentelellaのデモページはココ

『Gentelella』に使われているプラグインにEchartsというモノがありました。これが超多機能！

調べる事が多そうなので、今回はこの中の【echart Line】をPickUpします。

Gentelellaテンプレートの該当箇所を確認

フォルダ構成内でECHARTSの記載がある箇所は太字の3か所でした。

この中のworlds.jsについては世界地図の描写になっているので今回の調査対象外とします。

custom.jsのechart Line関連個所

/* ECHRTS */

function init_echarts() {

    if (typeof(echarts) === 'undefined') {
        return;
    }
    console.log('init_echarts');
(中略)

    //echart Line

    if ($('#echart_line').length) {

        var echartLine = echarts.init(document.getElementById('echart_line'), theme);

        echartLine.setOption({
            title: {
                text: 'Line Graph',
                subtext: 'Subtitle'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 220,
                y: 40,
                data: ['Intent', 'Pre-order', 'Deal']
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        show: true,
                        title: {
                            line: 'Line',
                            bar: 'Bar',
                            stack: 'Stack',
                            tiled: 'Tiled'
                        },
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true,
                        title: "Restore"
                    },
                    saveAsImage: {
                        show: true,
                        title: "Save Image"
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'Deal',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [10, 12, 21, 54, 260, 830, 710]
            }, {
                name: 'Pre-order',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [30, 182, 434, 791, 390, 30, 10]
            }, {
                name: 'Intent',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [1320, 1132, 601, 234, 120, 90, 20]
            }]
        });

    }
　(中略)
}
(中略)
$(document).ready(function() {
    init_echarts();
}

//echart Line 以下の場所が今回の描写に利用している箇所です。
例のごとく値が入ったサンプルが存在しています。

25行目～29行目：グラフのラベル設定

25～29行目は下の赤丸部分の設定を行っています。

legend: {
                x: 220,
                y: 40,
                data: ['Intent', 'Pre-order', 'Deal']
            },

縦位置と横位置そしてラベル名。わかり易い構成です。

こんな実験してみました。『値は無いけど項目だけ勝手に足してみた』

data: ['Intent', 'Pre-order', 'Pre-order2', 'Deal', 'Deal2']

これでもグラフとして現れるラベルは3つ [ Intent / Pre-order / Deal ]だけでした。
理由は62行目～98行目の各データの中で【name:'Deal'】などとして値としっかり紐づけているからです。
逆を言えば、値ゼロのリストもしっかり作ってあげないとグラフのラベルに描写されないと言う事になります。

62行目～98行目：プロットするデータと初期値

サンプルではすべての初期値が【line】になっていますが、例えば76行目を【bar】にすると上のようなグラフが作れます。※右上のグラフの姿を変えるボタンを押すと全体がLineやbarに変わります。

#プロットする値 ※73行目、 85行目、 97行目
data: [10, 12, 21, 54, 260, 830, 710]

#横軸 ※57行目
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

用意する値は単純な1次元配列ですが、共通の横軸を用意する必要があります。
(値ゼロでもカラムを用意しなくてはいけない)

ちなみに値の無い時の扱いとして次のような実験をしてみました。

要素の数が可変する場合の処理をどうするか

記載する内容(変動させる内容)を要素ごとにまとめて【<script>var hoge = hoga</script>】でJavaScriptに配列を送って JS内で【forループ】が最適解かもと思っています。

今回作成しているECモールの自店舗データの分析とかであれば要素の個数がほぼ固定なので、こう言った場合は事前準備でもいいかもしれません。存在しなければグラフに表示されないわけですから。

まとめ

ECHARTS公式

ECHARTSだけで色んなグラフを作れるので結構楽しそうです。

キーワードなどは分布図を利用すれば『来店キーワードとGoogle検索数との間での散らばり』が見えるでしょうし。
端末差異などは円グラフなんかでパッとわかるようになると思います。
特にキーワードの分散図なんかは下の2点をポイントとして対策まで落とし込めるかもしれません。

グラフの力ってスゲーな。

＼ 最新情報をチェック ／