WeChat applet + ECharts to achieve dynamic refresh process record

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
 }

<view class="content">
    <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ecOne}}"></ec-canvas>
    <ec-canvas id="mychart-two" canvas-id="mychart-multi-two" ec="{{ ecTwo }}"></ec-canvas>
</view>

.content {
    width: 100%;
    background-color: #F2F2F2;
    overflow-y: auto;
}
#mychart-one {
    position: absolute; 
    top: 0;
    height: 50%;
    left: 0;
    right: 0;
}
#mychart-two {
    position: absolute; 
    top: 50%;
    height: 50%;
    left: 0;
    right: 0;
}

import * as echarts from '../../ec-canvas/echarts';

function setOption(chart, xdata, ydata) {
    const option = {
        title:
            text: 'Test',
            padding: [10, 0, 0, 20],
            textStyle: {
                fontSize: 14,
                color: '#696969'
            },
            top: '10rpx'
        },
        backgroundColor: "#fff",
        color: ["#006EFF", "#67E0E3", "#9FE6B8"],
        animation: false,
        grid: {
            show:false
        },
        xAxis:
            type: 'category',
            data: xdata, //The data on the x-axis is dynamic, so I pass it in as a parameter axisLabel: {
                interval: 5, //x-axis interval display scale formatter: function (value) { //display time var date = new Date(value * 1000);
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
                    return h + m
                },
                fontSize: 8
            }
        },
        yAxis: {
            x: 'center',
            scale: true,
            type: 'value',
            axisLabel: {
                formatter: function (value) {
                var val = value / 1000000000 + 'G';
                    return val
                }
            }
        },
        series: [{
            type: 'line',
            data: ydata, //The data on the y-axis is also dynamic and is passed in as a parameter symbol: 'none',
            lineStyle:
                width: 1
            }
        }]
    };
    chart.setOption(option)
}

Page({
    data: {
        ecOne: {
            lazyLoad: true
        },
        ecTwo: {
            lazyLoad: true
        },
        timer:'' //Because I want to refresh in real time, I set a timer},
    onLoad: function (options) {
        var _this = this;
        this.getOneOption();
        this.getTwoOption();
        this.setData({ //Refresh every minute timer: setInterval(function () {
                    _this.getOneOption();
                    _this.getTwoOption();
                }, 60000)
        })
    },
    onReady: function () { //This step must be paid attention to this.oneComponent = this.selectComponent('#mychart-one');  
        this.twoComponent = this.selectComponent('#mychart-two');
    },
    onUnload: function () {
        clearInterval(this.data.timer)
    },
    init_one: function (xdata, ydata) { // Initialize the first chart this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            setOption(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    init_two: function (xdata, ydata) { // Initialize the second chart this.storagemaxComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            setOption(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    getOneOption: function () { //This step actually requires adding data to the chart var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com', //The interface address where you request data method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: { // parameters passed, no need to say more about these id: xxxx
            },
            success:function(res){
     //I'm assuming here that res.xdata and res.ydata are the data we need, that is, the data displayed on the x-axis and y-axis. Remember that they must be arrays!
                _this.init_one(res.xdata,res.ydata)
            }
        })  
    },
    //The second chart is processed in the same way getTwoOption: function () {  
        var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com', //The interface address where you request data method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: { // parameters passed, no need to say more about these id: xxxx
            },
            success:function(res){
                _this.init_two(res.xdata,res.ydata)
            }
        })  
    }
})