Echartsをプロジェクトに導入する際、単一タグで読み込む場合とモジュールとして読み込む場合で参照方法が異なります。

<script src="js/echarts.min.js"></script> // 単一タグでの読み込み

<script>
    var chartInstance = require('echarts'); // モジュールとして使用する場合
    var chartInstance = echarts; // 単一タグで読み込んだ場合は直接名前を使用
</script>

Echartsは幅と高さが指定されたコンテナ内に配置し、そのコンテナで初期化する必要があります。JavaScriptコードは読み込みイベント内に配置するか、初期化対象のコンテナの後に配置してください。そうしないとコンテナが見つかりません。```

Echartsで作成可能な主なグラフタイプ：bar（棒グラフ）、line（折れ線グラフ）、k（ローソク足チャート）、scatter（散布図）、radar（レーダーチャート）、pie（円グラフ）、map（地図） データ設定棒グラフの作成```
myChart.setOption( // データ設定
    {
        title:{ // タイトル
            text:'グラフタイトル',
            left:'center', // タイトルの水平位置 left,center,right
            top:'bottom' // タイトルの垂直位置 top,center,bottom
            borderColor: 'red', // タイトルの枠線色
            borderWidth: 2,  // タイトルの枠線幅
            fontWeight: 'bold', // タイトルの太字
            textStyle: {
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333'          // メインタイトルの文字色
            },
            subtextStyle: {
                color: '#aaa'          // サブタイトルの文字色
            }
        },
        borderColor: '#ccc', // 枠線色
        backgroundColor:'#f5f5f5', // 背景色
        tooltip: {
            trigger: 'item',           // トリガータイプ、'item' または 'axis'
            showDelay: 20,             // 表示遅延、頻繁な切り替えを避けるため、単位ms
            hideDelay: 100,            // 非表示遅延、単位ms
            transitionDuration : 0.4,  // アニメーション変化時間、単位s
            borderRadius: 4,           // ツールチップの枠線丸み、単位px、デフォルトは4
            axisPointer : {            // 座標軸インジケーター、座標軸トリガー時に有効
                type : 'line',         // デフォルトは直線、'line' または 'shadow' を選択可能
                lineStyle : {          // 直線インジケーターのスタイル設定
                    color: '#48b',
                    width: 2,
                    type: 'solid'
                },
                shadowStyle : {                       // 影インジケーターのスタイル設定
                    width: 'auto',                   // 影のサイズ
                    color: 'rgba(150,150,150,0.3)'  // 影の色
                }
            },
        },
        legend: { // 凡例
            data:['売上','データ']
            orient: 'horizontal',      // レイアウト方式、デフォルトは水平、
                                       // 'horizontal' または 'vertical' を選択可能
            left: 'center',            // 水平配置位置、デフォルトは中央、
                                       // 'center'、'left'、'right' を選択可能
            top: 'top',                // 垂直配置位置、デフォルトは上部、
                                       // 'top'、'bottom'、'center' を選択可能
            padding: 5,                // 凡例の内側余白、単位px、デフォルトは5
            itemGap: 10,               // 各項目間の間隔、単位px、デフォルトは10
            itemWidth: 20,             // 凡例アイコンの幅
            itemHeight: 14,            // 凡例アイコンの高さ
        },
        visualMap: {// 値域
            splitNumber: 5,            // 分割数、デフォルトは10、0の場合は線形グラデーション
            color:['#1e90ff','#f0ffff'],//最初の色から2番目の色へグラデーション
            text:['高','低'],         // テキスト、デフォルトは数値テキスト
        },
        toolbox: {// ツールボックス
            orient: 'horizontal',      // レイアウト方式、デフォルトは水平、
                                       // 'horizontal' または 'vertical' を選択可能
            right: 'right',            // 水平配置位置、デフォルトは右寄せ、
                                       // 'center'、'left'、'right' を選択可能
            top: 'top',                // 垂直配置位置、デフォルトは上部、
                                       // 'top'、'bottom'、'center' を選択可能
            color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
            backgroundColor: 'rgba(0,0,0,0)', // ツールボックスの背景色
            borderColor: '#ccc',       // ツールボックスの枠線色
            borderWidth: 0,            // ツールボックスの枠線幅、単位px、デフォルトは0（枠線なし）
            padding: 5,                // ツールボックスの内側余白、単位px、デフォルトは5
            itemGap: 10,               // 各項目間の間隔、単位px、デフォルトは10
            itemSize: 16,              // ツールボックスアイコンのサイズ
            feature : {
                mark : {show: true, title: '補助線のオン/オフ'},
                dataZoom : {show: true, title: '領域ズーム'},
                dataView : {show: true, title: 'データビュー', readOnly: false},
                magicType : {show: true, type: ['line', 'bar'], title: {
                    line: '折れ線グラフに切り替え',
                    bar: '棒グラフに切り替え'
                }},
                restore : {show: true, title: '元に戻す'},
                saveAsImage : {show: true, title: '画像として保存'}
            }
        },
        dataZoom: {// データズーム
            orient: 'horizontal',      // レイアウト方式、デフォルトは水平、
                                       // 'horizontal' または 'vertical' を選択可能
            dataBackgroundColor: '#eee',            // データ背景色
            fillerColor: 'rgba(144,197,237,0.2)',   // 塗りつぶし色
            handleColor: 'rgba(70,130,180,0.8)'     // ハンドル色
        },
        color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae'],// 棒グラフの色
        xAxis:{ // X軸
            type:"category", // カテゴリタイプか値タイプ
            data:["項目A","項目B","項目C"],
            axisLabel:{
                interval:0, // ラベル間隔
                rotate:45, // ラベル回転角度
                margin:15, // ラベルと軸線の距離
                textStyle:{
                    color:"red",// ラベルの色
                    fontSize:12 // ラベルのサイズ
                }
            }
        },
        yAxis:{ // Y軸
             name: '数量', // 軸の名前
             min:0, // 最小値
             max:700 // 最大値
        },
        series: [{
            name: '売上',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }]
    }
);

一般的にEchartsは絶対配置のような理解しやすいレイアウト方式で使用されます。しかし、コンテナサイズが極端な場合、この方法ではコンポーネントの重なりを自動的に回避できません。特にモバイル端末の小さい画面ではこの問題が顕著です。

さらに、PCとモバイル端末の両方で同じグラフを表示する必要があるシナリオもあります。これには、コンテナサイズの変化に応じてEchartsの内部コンポーネントが変化する能力が必要です。

この問題を解決するため、Echartsはコンポーネントの位置設定を改善し、CSSのMedia Queryに似たレスポンシブ機能を実装しました。

media内でqueryを記述しないoptionはデフォルト値を表し、すべてのquery条件を満たさない場合にこのoptionが使用されます。

option = {
    baseOption: { // 基本となるオプション
        title: {text: '基本設定のグラフ'},
        legend: {data: ['データA', 'データB']},
        series: [
            {type: 'bar', data: [120, 200, 150]},
            {type: 'line', data: [80, 150, 180]}
        ]
    },
    media: [ // media queryのルールを定義
        {
            query: {maxWidth: 768},   // 画面幅が768px以下の場合
            option: {       // このルールを満たす場合のオプション
                legend: {orient: 'vertical', right: 10, top: 'center'},
                series: [
                    {type: 'bar', data: [120, 200, 150], itemWidth: 10},
                    {type: 'line', data: [80, 150, 180], symbolSize: 6}
                ]
            }
        },
        {
            query: {minWidth: 769},   // 画面幅が769px以上の場合
            option: {       // このルールに対応するオプション
                legend: {orient: 'horizontal', bottom: 10},
                series: [
                    {type: 'bar', data: [120, 200, 150], itemWidth: 20},
                    {type: 'line', data: [80, 150, 180], symbolSize: 8}
                ]
            }
        },
        {                   // ルールを記述しない場合は『デフォルト』を意味し、
            option: {       // すべてのルールを満たさない場合にこのオプションを採用
                title: {text: 'デフォルト設定のグラフ'},
                legend: {data: ['データA', 'データB'], orient: 'horizontal'}
            }
        }
    ]
};