Maison> interface Web> js tutoriel> le corps du texte

Graphique multi-axes ECharts : comment afficher des données multidimensionnelles

WBOY
Libérer: 2023-12-18 18:39:54
original
1817 Les gens l'ont consulté

Graphique multi-axes ECharts : comment afficher des données multidimensionnelles

Graphique multi-axes ECharts : Comment afficher des données multidimensionnelles, des exemples de code spécifiques sont nécessaires

Introduction :
Avec l'avènement de l'ère du Big Data, nous devons mieux afficher les données multidimensionnelles complexes. En tant que puissante bibliothèque de visualisation, ECharts fournit une variété de types de graphiques, parmi lesquels les graphiques multi-axes sont l'un des outils importants pour afficher des données multidimensionnelles. Cet article présentera ce qu'est un graphique multi-axes et comment utiliser ECharts pour afficher des données multidimensionnelles, et fournira des exemples de code correspondants.

1. Qu'est-ce qu'un graphique multi-axes ? Un graphique multi-axes est un graphique qui peut afficher plusieurs séries de données avec différentes unités et magnitudes de données sur le même graphique. En utilisant plusieurs axes, un pour chaque série de données, nous pouvons comparer de manière plus intuitive les données sur différentes dimensions.

2. Éléments de configuration du graphique multi-axes ECharts

Pour créer un graphique multi-axes, nous devons définir plusieurs propriétés dans l'objet option d'ECharts. Voici les principaux éléments de configuration qui doivent être définis :

    attribut tooltip : utilisé pour afficher des informations détaillées sur la série de données. Par exemple, lorsque la souris passe sur le graphique, les valeurs spécifiques des données seront affichées.
  1. Attribut legend : utilisé pour configurer la légende, c'est-à-dire l'identification des couleurs dans le graphique, utilisé pour distinguer différentes séries de données.
  2. Propriétés xAxis et yAxis : utilisées pour configurer plusieurs axes. xAxis configure l'axe x et yAxis configure l'axe y. Plusieurs axes peuvent être configurés sous forme de tableau.
  3. Attribut series : utilisé pour configurer les séries de données. Chaque série de données correspond à un axe et peut avoir différents types de données et méthodes de présentation graphique.
3. Exemple de code

Ci-dessous, nous utilisons un exemple de code spécifique pour montrer comment utiliser ECharts pour créer un graphique multi-axes afin d'afficher des données multidimensionnelles. Commençons par un exemple de merchandising.

    Présentez la bibliothèque ECharts et les fichiers de style associés :
  1.     Multi-axis Chart Example  
      
    Copier après la connexion
    Créez un graphique multi-axes et configurez les propriétés associées :
  1. var chart = echarts.init(document.getElementById('chart')); var option = { tooltip: { trigger: 'axis' }, legend: { data: ['电视销量', '冰箱销量', '洗衣机销量'] }, xAxis: [ { type: 'category', data: ['一月', '二月', '三月', '四月', '五月'] } ], yAxis: [ { type: 'value', name: '销量' }, { type: 'value', name: '销售额' } ], series: [ { name: '电视销量', type: 'bar', data: [120, 200, 150, 80, 70] }, { name: '冰箱销量', type: 'bar', data: [80, 100, 120, 150, 110] }, { name: '洗衣机销量', type: 'line', yAxisIndex: 1, data: [1000, 1500, 2000, 1800, 1600] } ] }; chart.setOption(option);
    Copier après la connexion
Dans le code ci-dessus, nous avons mis en place trois séries de données : ventes de téléviseurs, ventes de réfrigérateurs et vente de machines à laver. Parmi eux, les ventes de téléviseurs et de réfrigérateurs sont affichées à l'aide de graphiques à barres, et les ventes de machines à laver sont affichées à l'aide de graphiques linéaires. Le volume des ventes et les ventes sont affichés à l'aide de différents axes Y.

4. Résumé

ECharts fournit la fonction de graphiques multi-axes, qui peuvent facilement afficher des données multidimensionnelles. En définissant les éléments de configuration appropriés, nous pouvons créer des graphiques multi-axes magnifiques et intuitifs. Grâce à l'exemple de code présenté dans cet article, vous pouvez rapidement commencer à utiliser ECharts pour dessiner des graphiques multi-axes et les appliquer à vos propres projets.

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!