Histogramme ECharts (multidimensionnel) : comment afficher le regroupement et la comparaison des données

Histogramme ECharts (multidimensionnel) : Comment afficher le regroupement et la comparaison des données, des exemples de code spécifiques sont requis

ECharts est une bibliothèque de visualisation open source basée sur JavaScript, utilisée pour afficher différents types de graphiques de données. L'histogramme est une méthode courante de visualisation de données qui peut être utilisée pour afficher le regroupement et la comparaison de données dans différents groupes ou catégories. Cet article présentera en détail comment utiliser la fonction d'histogramme multidimensionnel d'ECharts pour afficher le regroupement et la comparaison de données, et fournira des exemples de code spécifiques pour référence aux lecteurs.

1. Présentation de l'histogramme multidimensionnel ECharts

Un histogramme multidimensionnel est un graphique qui peut afficher plusieurs indicateurs de données en même temps. Il peut également être appelé graphique à barres, graphique à barres ou histogramme. Il peut être utilisé pour afficher le regroupement et la comparaison de données dans différents groupes ou catégories, et convient à l'affichage d'ensembles de données contenant plusieurs dimensions. Par exemple, lors de l'affichage des ventes de l'entreprise, les ventes de différentes gammes de produits, les ventes de différentes régions de vente et d'autres dimensions peuvent être affichées simultanément dans un histogramme multidimensionnel pour comparer rapidement la relation entre différentes données. L'histogramme multidimensionnel de

ECharts prend en charge une variété de combinaisons de dimensions différentes, telles que différentes valeurs de la même dimension en tant que différents groupes d'histogrammes, ou des combinaisons de différentes dimensions en tant que différents groupes d'histogrammes, etc. Une fois la combinaison des dimensions déterminée, chaque groupe d'histogrammes peut être personnalisé en fonction de différentes couleurs, dégradés de couleurs, écarts entre les histogrammes, largeurs d'histogramme, etc., pour s'adapter aux différents besoins.

2. Comment utiliser l'histogramme multidimensionnel ECharts

1. Préparer les données

Avant d'utiliser l'histogramme multidimensionnel ECharts pour afficher des données, vous devez d'abord préparer les données. Le format des données doit être conforme au format spécifié par ECharts. Vous pouvez vérifier les exigences de format spécifiques dans la documentation officielle. Voici un exemple :

let data = [
   {product: 'A', area: 'Shanghai', sales: 800},
   {product: 'B', area: 'Shanghai', sales: 1200},
   {product: 'A', area: 'Beijing', sales: 1000},
   {product: 'B', area: 'Beijing', sales: 1400},
];

Les données ci-dessus contiennent des données en trois dimensions : gamme de produits, région de vente et ventes.

2. Configurer les paramètres ECharts

Après avoir préparé les données, vous devez configurer les paramètres ECharts. ECharts fournit une méthode de configuration de paramètres spéciale pour les histogrammes multidimensionnels. Vous pouvez consulter les descriptions spécifiques des paramètres dans la documentation officielle. Voici un exemple :

let option = {
   xAxis: {
       type: 'category',
       data: ['Shanghai', 'Beijing']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           type: 'bar',
           name: 'Product A',
           data: [800, 1000]
       },
       {
           type: 'bar',
           name: 'Product B',
           data: [1200, 1400]
       }
   ]
};

Dans le code ci-dessus, l'axe des x représente la dimension de la région de vente et l'axe des y représente la dimension des ventes. Deux groupes d'histogrammes sont définis dans le tableau de séries, qui correspondent aux données de vente du produit A et du produit B.

3. Rendu des graphiques ECharts

Après avoir terminé la configuration des paramètres ECharts, vous pouvez lier les paramètres aux éléments DOM de la page HTML via l'API fournie par ECharts pour générer un histogramme spécifique. Voici un exemple :

let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);

Dans le code ci-dessus, 'chart_container' est la valeur ID d'un élément DIV dans la page HTML, qui est utilisée pour stocker l'histogramme généré. La méthode echarts.init() est utilisée pour initialiser l'instance ECharts et la méthode setOption() est utilisée pour définir les paramètres de l'instance.

3. Exemple de code

Ce qui suit est un exemple de code simple qui montre comment utiliser l'histogramme multidimensionnel ECharts pour afficher le regroupement et la comparaison de données. Le code affiche deux ensembles de données de ventes, à savoir les données de ventes pour différentes gammes de produits et régions de vente.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts多维柱状图示例</title>
</head>
<body>
   <div id="chart_container" style="width: 600px; height: 400px;"></div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
       // 准备数据
       let data = [
           {product: 'A', area: 'Shanghai', sales: 800},
           {product: 'B', area: 'Shanghai', sales: 1200},
           {product: 'A', area: 'Beijing', sales: 1000},
           {product: 'B', area: 'Beijing', sales: 1400},
       ];
       
       // 配置ECharts参数
       let option = {
           legend: {},
           tooltip: {},
           dataset: {
               dimensions: ['area', 'product', 'sales'],
               source: data
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 0,
                   rotate: 45
               }
           },
           yAxis: {},
           series: [
               {type: 'bar', seriesLayoutBy: 'row'},
               {type: 'bar', seriesLayoutBy: 'row'}
           ]
       };
       
       // 渲染ECharts图表
       let chart = echarts.init(document.getElementById('chart_container'));
       chart.setOption(option);
   </script>
</body>
</html>

Dans l'exemple de code ci-dessus, le paramètre legend est utilisé pour configurer la position et le style de la légende, l'info-bulle est utilisée pour configurer le style de la boîte d'invite lorsque la souris est survolée, le paramètre dataset est utilisé pour configurer le format de l'ensemble de données , et les dimensions sont utilisées pour définir l'ordre des dimensions de l'ensemble de données, la source est utilisée pour spécifier la source de données.

Le paramètre xAxis est utilisé pour configurer le style de l'axe x, les attributs d'intervalle et de rotation dans axisLabel sont utilisés pour contrôler le mode d'affichage du texte de l'étiquette de l'axe x, et yAxis est utilisé pour configurer le style de l'axe y. -axe.

series est utilisé pour définir le style du groupe d'histogrammes, où type représente le type de graphique et seriesLayoutBy représente la méthode de dessin utilisant des lignes ou des colonnes comme dimensions de données.

Grâce aux exemples de code ci-dessus, les lecteurs peuvent avoir une compréhension plus approfondie de l'utilisation des histogrammes multidimensionnels ECharts, puis afficher le regroupement et la comparaison des données de manière plus flexible dans des applications pratiques.

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!