import { Pieces } from "../@share/pieces";

/**
 * 類專案中的xy折線圖
 * demo https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
 * 文件 https://echarts.apache.org/zh/option.html#title
 */
export class LineChartXy {
    data = [];
    seconds = 0;

    constructor(myChart) {
        // 繪製圖表，初始化繪圖資料
        this
 
.initData();
        myChart.setOption(this.getOptions(this.data[0], this.data[1]));
        // 隨機資料
        this.setDynamicData(myChart);
    }

    /**
     * 初始化資料
     */
    initData() {
        let x = Pieces.getRandomNumberByCount(1, 100, 0, 50);
        this.data = [
            [[x, this.seconds]],
            [[
 
this.seconds, x]],
        ];
    }

    /**
     * 設定資料更新展示
     * @param myChart
     */
    setDynamicData(myChart) {
        let self = this;
        // 設定資料顯示
        setInterval(function () {
            let x = Pieces.getRandomNumberByCount(1, 100, 0, 50);
            self.seconds++
            if (self.seconds >= 60) {
                self.seconds 
 
= 0;
            }
            self.data[0].push([x, self.seconds]);
            self.data[1].push([self.seconds, x]);
            myChart.setOption({
                series: [
                    {
                        data: self.data[0],
                    },
                    {
                        data: self.data[1],
                    },
                ]
            });
        }, 1000);
    }

    /**
     * 配置項
     * @param data1
     * @param data2
     * @returns Object
     */
    getOptions(data1, data2) {
        return {
            xAxis: {
                type: 'value',
                min: 0,
                max: 100,
                axisLabel: {
                    show: true,
                },
                interval: 25, // 強制設定座標軸分割間隔。
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 100,
                boundaryGap: [ 0, '100%' ],
                splitLine: {
                    show: true,
                },
                splitNumber: 4, // 座標軸的分割段數，需要注意的是這個分割段數只是個預估值
                interval: 25, // 強制設定座標軸分割間隔。
                axisLine: {
                    show: true,
                },
                axisTick: { // 座標軸刻度相關設定。
                    show: true,
                    inside: false, // 座標軸刻度是否朝內，預設朝外。
                    length: 5, // 座標軸刻度的長度。
                },
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    return '(' + params[0].value[0] + ',' + params[0].value[1] + ')';
                },
                renderMode: 'richText',
                padding: [ 5, 10 ],
            },
            legend: {
              show: true,
            },
            series: [
                {
                    name: '1',
                    type: 'line',
                    showSymbol: false,
                    data: data1
                },
                {
                    name: '2',
                    type: 'line',
                    showSymbol: false,
                    data: data2
                },
            ]
        };
    }
}