Tableau de bord ECharts : comment afficher les indicateurs de données-js tutoriel-php.cn

Tableau de bord ECharts : comment afficher les indicateurs de données

王林

Libérer： 2023-12-17 21:56:39

original

832 Les gens l'ont consulté

Tableau de bord ECharts : comment afficher les indicateurs de données

ECharts Dashboard : Comment afficher les indicateurs de données, des exemples de code spécifiques sont nécessaires

Introduction :
À l'ère de l'information moderne, nous sommes exposés à toutes sortes de données partout. Comprendre et analyser les données est essentiel à la prise de décision et au développement commercial. En tant qu'outil de visualisation de données, le tableau de bord peut afficher visuellement divers indicateurs de données et nous aider à mieux comprendre les données. ECharts est une puissante bibliothèque de visualisation de données et son composant de tableau de bord peut facilement réaliser l'affichage visuel des données. Cet article explique comment utiliser le tableau de bord ECharts pour afficher des indicateurs de données et fournit des exemples de code spécifiques.

Texte :
1. Introduction d'ECharts
Tout d'abord, nous devons présenter la bibliothèque ECharts. Il peut être introduit comme suit :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ECharts仪表盘</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="dashboard" style="width: 600px;height:400px;"></div>
    </body>
</html>

Copier après la connexion

2. Créer un tableau de bord
Ensuite, nous devons créer un conteneur pour afficher le tableau de bord. Ceci peut être réalisé grâce à un élément div, il suffit de définir la largeur et la hauteur.

var dashboardChart = echarts.init(document.getElementById('dashboard'));

Copier après la connexion

3. Configurer les données
Après avoir créé le conteneur du tableau de bord, nous devons configurer les données pour afficher les indicateurs du tableau de bord. Voici un exemple simple :

var option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '指标名称',
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50, name: '指标名称'}]
        }
    ]
};

dashboardChart.setOption(option);

Copier après la connexion

Dans le code ci-dessus, nous définissons une variable option, qui contient les informations de configuration du tableau de bord. tooltip est utilisé pour définir les informations sur les indicateurs. series est un tableau utilisé pour définir les indicateurs du tableau de bord. option，其中包含了仪表盘的配置信息。tooltip用于设置指标的提示信息，series是一个数组，用于定义仪表盘的指标。

四、展示仪表盘
在配置好数据后，我们需要调用setOption方法将数据传递给仪表盘容器，实现仪表盘的展示。

dashboardChart.setOption(option);

Copier après la connexion

五、动态更新数据
有时候，我们需要实时或定期更新仪表盘的数据。可以通过使用定时器来模拟动态更新数据的效果，代码示例如下：

setInterval(function () {
    option.series[0].data[0].value = Math.random() * 100;
    dashboardChart.setOption(option);
}, 2000);

Copier après la connexion

上述代码中，我们使用了setInterval函数每2秒更新一次数据。通过修改option.series[0].data[0].value的值，可以动态改变仪表盘的指标值。

结论：
通过以上步骤，我们可以使用ECharts仪表盘组件方便地展示数据指标。首先引入ECharts库，然后创建仪表盘容器，配置数据，最后调用setOption

4. Afficher le tableau de bord

Après avoir configuré les données, nous devons appeler la méthode setOption pour transmettre les données au conteneur du tableau de bord afin d'afficher le tableau de bord.

rrreee

5. Mettre à jour dynamiquement les données

Parfois, nous devons mettre à jour les données du tableau de bord en temps réel ou régulièrement. Vous pouvez simuler l'effet de la mise à jour dynamique des données en utilisant une minuterie. L'exemple de code est le suivant :

Dans le code ci-dessus, nous utilisons la fonction setInterval pour mettre à jour les données toutes les 2 secondes. En modifiant la valeur de option.series[0].data[0].value, la valeur de l'indicateur du tableau de bord peut être modifiée dynamiquement.

Conclusion : 🎜Grâce aux étapes ci-dessus, nous pouvons utiliser le composant de tableau de bord ECharts pour afficher facilement des indicateurs de données. Présentez d'abord la bibliothèque ECharts, puis créez un conteneur de tableau de bord, configurez les données et enfin appelez la méthode setOption pour afficher le tableau de bord. Dans le même temps, nous pouvons réaliser des mises à jour en temps réel du tableau de bord en mettant à jour dynamiquement les données. 🎜🎜Ce qui précède est un exemple de code pour utiliser le tableau de bord ECharts pour afficher des indicateurs de données. J'espère qu'il pourra vous aider dans la visualisation des données. 🎜🎜Référence : 🎜🎜🎜Document officiel ECharts : https://echarts.apache.org/zh/index.html🎜🎜

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!