So implementieren Sie Echtzeit-Datenaktualisierungen in ECharts-js-Tutorial-php.cn

So implementieren Sie Echtzeit-Datenaktualisierungen in ECharts

WBOY

Freigeben： 2023-12-17 14:07:07

Original

1767 Leute haben es durchsucht

So implementieren Sie Echtzeit-Datenaktualisierungen in ECharts

ECharts ist eine Open-Source-Bibliothek für visuelle Diagramme, die verschiedene Diagrammtypen und umfangreiche Datenvisualisierungseffekte unterstützt. In tatsächlichen Szenarien müssen wir häufig Echtzeitdaten anzeigen. Wenn sich die Datenquelle ändert, kann das Diagramm sofort aktualisiert werden und die neuesten Daten anzeigen.

Wie erreicht man also eine Datenaktualisierung in Echtzeit in ECharts? Das Folgende ist ein spezifisches Code-Demonstrationsbeispiel.

Zuerst müssen wir die js-Dateien und Themenstile von ECharts einführen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts实时数据更新</title>
    <!--引入ECharts的js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    <!--引入ECharts主题样式-->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/theme/macarons.min.js"></script>
</head>
<body>
    <!--ECharts图表容器-->
    <div id="chart" style="width: 800px;height: 600px;"></div>
</body>
</html>

Nach dem Login kopieren

Als nächstes müssen wir eine Datenquelle definieren, um sich ändernde Echtzeitdaten zu simulieren:

// 模拟实时数据
var data = [120, 132, 101, 134, 90, 230, 210];
setInterval(function() {
    // 修改数据
    data.shift();
    data.push(Math.random() * 200);
}, 3000);

Nach dem Login kopieren

Unter diesen wird die Funktion setInterval alle 3 Sekunden verwendet Aktualisieren Sie die Daten einmal. Math.random() * 200 generiert eine Zufallszahl, um Änderungen in den Daten zu simulieren. Natürlich müssen wir in praktischen Anwendungen Daten entsprechend den spezifischen Umständen erhalten und verarbeiten.

Als nächstes müssen wir eine ECharts-Diagramminstanz definieren und das Diagramm auf der HTML-Seite rendern:

// 定义ECharts图表实例
var chart = echarts.init(document.getElementById('chart'),'macarons');

// 渲染图表
chart.setOption({
    title: {
        text: 'ECharts实时数据更新演示',
        subtext: '数据源从左侧滚动',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [{
        name: '温度',
        type: 'line',
        data: data
    }]
});

Nach dem Login kopieren

In ECharts müssen wir verschiedene Eigenschaften des Diagramms über die Funktion setOption festlegen, einschließlich Titel, Achse, Datenreihe usw . . In diesem Beispiel legen wir eine X-Achsen-Koordinate fest, die 7 Tage enthält, die Y-Achsen-Koordinate ist der Temperaturwert, die Datenreihe sind Temperaturdaten und der Typ ist ein Liniendiagramm. Darüber hinaus haben wir den Macarons-Themenstil verwendet, um den Anzeigeeffekt des Diagramms zu verschönern.

Schließlich müssen wir den Timer verwenden, um die Diagrammdaten kontinuierlich zu aktualisieren, um eine Echtzeit-Datenanzeige zu erreichen:

// 定时更新数据
setInterval(function() {
    // 更新数据
    data.shift();
    data.push(Math.random() * 200);
    
    // 更新图表
    chart.setOption({
        series: [{
            data: data
        }]
    });
}, 3000);

Nach dem Login kopieren

Im Timer verwenden wir die Umschaltfunktion, um den ersten Wert der Datenquelle anzuzeigen, und den Push Die Funktion generiert eine Zufallszahl. Die Zahl wird am Ende der Datenquelle hinzugefügt, um die Transformation der Daten zu realisieren. Danach haben wir die Datenreihe des ECharts-Diagramms über die Funktion setOption aktualisiert, um eine Echtzeitanzeige des Diagramms zu erreichen.

Zusammenfassend ist das Obige ein spezifisches Codebeispiel für die Implementierung von Echtzeit-Datenaktualisierungen in ECharts. Im tatsächlichen Gebrauch können wir entsprechend unseren tatsächlichen Bedürfnissen anpassen und optimieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Echtzeit-Datenaktualisierungen in ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!