Maison > Article > interface Web > Comment implémenter des mises à jour de données en temps réel dans ECharts

Comment implémenter des mises à jour de données en temps réel dans ECharts

WBOYoriginal: 2023-12-17 14:07:071606parcourir

ECharts est une bibliothèque de graphiques visuels open source qui prend en charge divers types de graphiques et de riches effets de visualisation de données. Dans les scénarios réels, nous devons souvent afficher des données en temps réel, c'est-à-dire que lorsque la source de données change, le graphique peut être mis à jour immédiatement et présenter les dernières données.

Alors, comment réaliser une mise à jour des données en temps réel dans ECharts ? Ce qui suit est un exemple de démonstration de code spécifique.

Tout d'abord, nous devons introduire les fichiers js et les styles de thème d'ECharts :

<!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>

Ensuite, nous devons définir une source de données pour simuler la modification des données en temps réel :

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

Parmi eux, la fonction setInterval est utilisée toutes les 3 secondes. Mettez à jour les données une fois, Math.random() * 200 génère un nombre aléatoire pour simuler les changements dans les données. Bien entendu, dans les applications pratiques, nous devons obtenir et traiter des données en fonction de circonstances spécifiques.

Ensuite, nous devons définir une instance de graphique ECharts et afficher le graphique sur la page HTML :

// 定义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
    }]
});

Dans ECharts, nous devons définir diverses propriétés du graphique via la fonction setOption, notamment le titre, l'axe, la série de données, etc. . Dans cet exemple, nous définissons une coordonnée sur l'axe X contenant 7 jours, la coordonnée sur l'axe Y est la valeur de la température, la série de données est des données de température et le type est un graphique linéaire. De plus, nous avons utilisé le style de thème macarons pour embellir l’effet d’affichage du graphique.

Enfin, nous devons utiliser le minuteur pour mettre à jour continuellement les données du graphique afin d'obtenir un affichage des données en temps réel :

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

Dans le minuteur, nous utilisons la fonction shift pour afficher la première valeur de la source de données, et le push La fonction générera un nombre aléatoire. Le nombre est ajouté à la fin de la source de données pour réaliser la transformation des données. Après cela, nous avons mis à jour la série de données du graphique ECharts via la fonction setOption pour obtenir un affichage en temps réel du graphique.

En résumé, ce qui précède est un exemple de code spécifique sur la façon d'implémenter des mises à jour de données en temps réel dans ECharts. En utilisation réelle, nous pouvons ajuster et optimiser en fonction de nos besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

echarts html math JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript et WebSocket : implémentation de mises à jour cartographiques en temps réelArticle suivant：JavaScript et WebSocket : implémentation de mises à jour cartographiques en temps réel

Articles Liés

Voir plus