WeChat-Applet + ECharts zur Realisierung eines dynamischen Aktualisierungsprozesses

"Komponenten verwenden": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
 }

<Klasse anzeigen="Inhalt">
    <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>
</Ansicht>

.Inhalt {
    Breite: 100 %;
    Hintergrundfarbe: #F2F2F2;
    Überlauf-y: automatisch;
}
#meinchart-eins {
    Position: absolut; 
    oben: 0;
    Höhe: 50%;
    links: 0;
    rechts: 0;
}
#mychart-zwei {
    Position: absolut; 
    oben: 50 %;
    Höhe: 50%;
    links: 0;
    rechts: 0;
}

importiere * als E-Charts aus „../../ec-canvas/echarts“;

Funktion setOption(Diagramm, xDaten, yDaten) {
    const option = {
        Titel:
            Text: 'Test',
            Polsterung: [10, 0, 0, 20],
            Textstil: {
                Schriftgröße: 14,
                Farbe: '#696969'
            },
            oben: „10rpx“
        },
        Hintergrundfarbe: "#fff",
        Farbe: ["#006EFF", "#67E0E3", "#9FE6B8"],
        Animation: falsch,
        Netz: {
            anzeigen:false
        },
        x-Achse:
            Typ: "Kategorie",
            data: xdata, //Die Daten auf der x-Achse sind dynamisch, deshalb übergebe ich sie als Parameter axisLabel: {
                Intervall: 5, //Skala der Intervallanzeige auf der X-Achse, Formatierer: Funktion (Wert) { //Anzeigezeit, var Datum = neues Datum (Wert * 1000);
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
                    Rückfahrt h + m
                },
                Schriftgröße: 8
            }
        },
        yAchse: {
            x: 'Mitte',
            Maßstab: wahr,
            Typ: "Wert",
            Achsenbezeichnung: {
                Formatierer: Funktion (Wert) {
                var val = Wert / 1000000000 + 'G';
                    Rückgabewert
                }
            }
        },
        Serie: [{
            Typ: "Linie",
            data: ydata, //Die Daten auf der y-Achse sind ebenfalls dynamisch und werden als Parameter übergeben symbol: 'none',
            Linienstil:
                Breite: 1
            }
        }]
    };
    chart.setOption(option)
}

Seite({
    Daten: {
        ecoOne: {
            lazyLoad: wahr
        },
        ecZwei: {
            lazyLoad: wahr
        },
        Timer: '' //Da ich in Echtzeit aktualisieren möchte, stelle ich einen Timer ein},
    onLoad: Funktion (Optionen) {
        var _this = dies;
        dies.getOneOption();
        dies.getTwoOption();
        this.setData({ //Jede Minute aktualisieren Timer: setInterval(function () {
                    _this.getOneOption();
                    _this.getTwoOption();
                }, 60000)
        })
    },
    onReady: function () { //Dieser Schritt muss beachtet werden this.oneComponent = this.selectComponent('#mychart-one');  
        diese.twoComponent = diese.selectComponent('#mychart-two');
    },
    beimEntladen: Funktion () {
        Intervall löschen(diese.Daten.Timer)
    },
    init_one: function (xdata, ydata) { // Initialisiere das erste Diagramm this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                Breite: Breite,
                Höhe: Höhe
            });
            setOption(Diagramm, X-Daten, Y-Daten)
            dieses.diagramm = Diagramm;
            Renditediagramm;
        });
    },
    init_two: function (xdata, ydata) { // Initialisiere das zweite Diagramm this.storagemaxComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                Breite: Breite,
                Höhe: Höhe
            });
            setOption(Diagramm, X-Daten, Y-Daten)
            dieses.diagramm = Diagramm;
            Renditediagramm;
        });
    },
    getOneOption: function () { //Dieser Schritt erfordert tatsächlich das Hinzufügen von Daten zum Diagramm var _this = this;
        wx.Anfrage({
            URL: 'https://xxxxxxx.com', //Die Schnittstellenadresse, wo Sie die Datenmethode anfordern: 'POST',
            Kopfzeile: {
                "Inhaltstyp": "Anwendung/json"
            },
            Daten: { // Parameter übergeben, mehr muss dazu nicht gesagt werden ID: xxxx
            },
            Erfolg:Funktion(res){
     //Ich gehe hier davon aus, dass res.xdata und res.ydata die Daten sind, die wir brauchen, also die Daten, die auf der x- und y-Achse angezeigt werden. Denken Sie daran, dass es Arrays sein müssen!
                _this.init_one(res.xdata,res.ydata)
            }
        })  
    },
    //Das zweite Diagramm wird auf die gleiche Weise verarbeitet getTwoOption: function () {  
        var _this = dies;
        wx.Anfrage({
            URL: 'https://xxxxxxx.com', //Die Schnittstellenadresse, wo Sie die Datenmethode anfordern: 'POST',
            Kopfzeile: {
                "Inhaltstyp": "Anwendung/json"
            },
            Daten: { // Parameter übergeben, mehr muss dazu nicht gesagt werden ID: xxxx
            },
            Erfolg:Funktion(res){
                _this.init_two(res.xdata,res.ydata)
            }
        })  
    }
})