echarts 折线图

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
                },
            ]
        };
    }
}