Maison >interface Web >js tutoriel >Comment utiliser des graphiques de calendrier pour afficher des données temporelles dans ECharts

Comment utiliser des graphiques de calendrier pour afficher des données temporelles dans ECharts

王林original: 2023-12-18 08:52:061678parcourir

Comment utiliser les graphiques de calendrier pour afficher les données temporelles dans ECharts

ECharts (la bibliothèque de graphiques JavaScript open source de Baidu) est un outil de visualisation de données puissant et facile à utiliser. Il propose une variété de types de graphiques, notamment des graphiques linéaires, des graphiques à barres, des diagrammes circulaires, etc. Le graphique calendaire est un type de graphique très distinctif et pratique dans ECharts, qui peut être utilisé pour afficher des données liées au temps. Cet article explique comment utiliser les graphiques de calendrier dans ECharts et fournit des exemples de code spécifiques.

Tout d'abord, vous devez importer la bibliothèque ECharts et créer un conteneur pour afficher le graphique. Voici un exemple simple de fichier HTML :

<!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="chart" style="width: 100%; height: 600px;"></div>
    <script>
        // 在这里编写JavaScript代码
    </script>
</body>
</html>

Ensuite, vous devez préparer les données à afficher dans le graphique du calendrier. Les données doivent contenir des horodatages et les valeurs correspondantes. Voici un exemple d'ensemble de données :

var data = [
    {time: "2022-01-01", value: 10},
    {time: "2022-01-02", value: 20},
    {time: "2022-01-03", value: 15},
    // 其他数据...
];

Ensuite, dans la partie code JavaScript, vous devez effectuer les étapes suivantes pour dessiner le graphique du calendrier :

Créez une instance ECharts et spécifiez le conteneur du graphique :

var chart = echarts.init(document.getElementById('chart'));

Configurez les paramètres de base du graphique de calendrier (tels que le titre, l'axe, etc.) :

var option = {
    title: {
        text: '时间数据的日历图示例',
        left: 'center'
    },
    tooltip: {},
    calendar: {
        left: 'center',
        top: 'middle',
        orient: 'horizontal',
        cellSize: [30, 30],
        range: ['2022-01-01', '2022-12-31']
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }]
};

Dans l'exemple ci-dessus, nous définissons le titre du graphique de calendrier sur "Exemple de graphique de calendrier de données temporelles" et plaçons le graphique de calendrier en position médiane. Définissez cellSize sur [30, 30] pour contrôler la taille de chaque grille de date. Utilisez range pour définir la plage horaire du graphique.

Appliquer les éléments de configuration au graphique :

chart.setOption(option);

Enfin, il vous suffit d'ouvrir le fichier HTML et vous verrez le graphique du calendrier dessiné !

Pour résumer, il est très simple d'utiliser le graphique calendaire d'ECharts pour afficher les données temporelles. Il vous suffit de préparer vos données et de suivre les étapes ci-dessus pour configurer et afficher le graphique. Bien entendu, vous pouvez également ajuster l'effet d'affichage et le style du graphique en fonction de vos propres besoins.

Remarque : l'exemple ci-dessus est uniquement destiné à la démonstration et ne fournit pas un ensemble de données complet ni un code complet. Dans l'application réelle, veuillez apporter les modifications correspondantes en fonction de vos propres besoins.

J'espère que cet article vous aidera à comprendre comment utiliser les graphiques de calendrier pour afficher les données temporelles dans ECharts !

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!

JavaScript echarts html

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：Optimisation des graphiques ECharts : comment améliorer les performances de renduArticle suivant：Optimisation des graphiques ECharts : comment améliorer les performances de rendu

Articles Liés

Voir plus