# ECHARTS 參數設定 & 圖表數據量過大解決方案

對於多條折線圖，若每條線的 X 軸與 Y 軸的值都不盡相同時 (如下圖所示)

`data.chart_data.[index].chart.c` 為 X 軸：時間
`data.chart_data.[index].chart.box` 為 Y 軸
`data.chart_data.[index].chart.water` 為 Y 軸

有幾個 ECHARTS 的 `option` 參數設置要注意：
* tooltip (為滑鼠移至圖表上所顯示的懸浮視窗)
* formatter: 因需客製化顯示時間的格式，return HTML 格式

    tooltip: {
        trigger: 'axis',
        formatter: function (data) {
            var html = '';
            data.forEach(element => {
                html += `${echarts.format.formatTime("yyyy-MM-dd hh:mm:ss", element.value[0])}<br>
                        ${element.marker}${element.seriesName}: ${_toCurrency(element.value[1])}<br><br>`;
            });
            return html;
        }
    },

顯示範例

* xAxis
* axisLabel.formatter: 因需客製化顯示時間的格式

    xAxis: [{
            type: 'time',
            boundaryGap: true,
            axisLine: {
                onZero: true
            },
            axisLabel: {
                formatter: function (time) {
                    return echarts.format.formatTime("yyyy-MM-dd hh:mm:ss", time);
                }
            }
        },
        {
            gridIndex: 1,
            type: 'time',
            boundaryGap: true,
            axisLine: {
                onZero: true
            },
            axisLabel: {
                formatter: function (time) {
                    return echarts.format.formatTime("yyyy-MM-dd hh:mm:ss", time);
                }
            },
            position: 'top',
            top: '10'
        }
    ],

* series
* data: 是可以將 X 軸與 Y 軸資料放在同一個陣列裡的。

    series: [
        {
            name: '見習水位',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[2] ? seriesData_2_water : waterPoints[2]
        },
        {
            name: '高手水位',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[3] ? seriesData_3_water : waterPoints[3]
        },
        {
            name: '大師水位',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[4] ? seriesData_4_water : waterPoints[4]
        },
        {
            name: '見習錢箱',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[2] ? seriesData_2_box : boxPonits[2]
        },
        {
            name: '高手錢箱',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[3] ? seriesData_3_box : boxPonits[3]
        },
        {
            name: '大師錢箱',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: timePoints[4] ? seriesData_4_box : boxPonits[4]
        }
    ]

    var timePoint = data.chart.c;
    timePoints[jp] = timePoint;
    console.log(timePoints);
    var waterPoint = data.chart.water;
    waterPoints[jp] = waterPoint;
    console.log(waterPoints);
    var boxPonit = data.chart.box;
    boxPonits[jp] = boxPonit;
    console.log(boxPonits);

    var seriesData_2_water = [];
    var seriesData_2_box = [];
    var seriesData_3_water = [];
    var seriesData_3_box = [];
    var seriesData_4_water = [];
    var seriesData_4_box = [];

    if (timePoints[2] !== undefined) {
        timePoints[2].forEach((element, index) => {
            seriesData_2_water.push([element, waterPoints[2][index]]);
            seriesData_2_box.push([element, boxPonits[2][index]]);
        });
    }
    if (timePoints[3] !== undefined) {
        timePoints[3].forEach((element, index) => {
            seriesData_3_water.push([element, waterPoints[3][index]]);
            seriesData_3_box.push([element, boxPonits[3][index]]);
        });
    }
    if (timePoints[4] !== undefined) {
        timePoints[4].forEach((element, index) => {
            seriesData_4_water.push([element, waterPoints[4][index]]);
            seriesData_4_box.push([element, boxPonits[4][index]]);
        });
    }

若圖表數據量過大(如：數十萬筆以上)，可以將 `dataZoom.realtime` 從 `true` 改成 `false`
以及將 `series` 區塊中加入

sampling: 'average',
large: true,

以改善縮放圖表時 lag 的情況

###### tags: `ECHARTS`