Comment utiliser un graphique en rose pour afficher la proportion de données dans ECharts

Comment utiliser le graphique en roses pour afficher la proportion des données dans ECharts

Résumé : Le graphique en roses est un outil d'analyse visuelle des données qui peut être utilisé pour afficher la proportion des données. Cet article explique comment utiliser la bibliothèque ECharts pour dessiner un graphique en rose sur une page Web et fournit des exemples de code spécifiques.

Introduction : Dans l'analyse et la visualisation des données, le graphique en rose est un type de graphique couramment utilisé. Sa caractéristique est que le centre du cercle est l'origine et la proportion de données est affichée sous différents angles de secteur. Grâce au graphique en roses, nous pouvons comparer visuellement les proportions de différentes catégories de données. ECharts est une puissante bibliothèque de visualisation de données qui prend en charge plusieurs types de graphiques, y compris les graphiques en roses.

Cet article sera divisé en parties suivantes :

1. Présentation de la bibliothèque ECharts
2. Préparation des données
3. Création d'un conteneur
4. Définir les options du graphique
5. Dessiner un graphique en roses
6. Présentation de la bibliothèque ECharts
   Tout d'abord, nous devons l'ajouter à la page Web Présentation de la bibliothèque ECharts. Il peut être importé directement via CDN ou importé après avoir téléchargé les fichiers sources d'ECharts.

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

2. Préparer les données
   Avant de dessiner le tableau des roses, nous devons préparer les données à afficher. Par exemple, voici un exemple de données simple montrant les ventes d'un produit dans différentes régions.

var data = [
  {name: '地区1', value: 50},
  {name: '地区2', value: 30},
  {name: '地区3', value: 80},
  {name: '地区4', value: 60},
  {name: '地区5', value: 40}
];

Parmi eux, le nom représente le nom de la région, et la valeur représente le volume des ventes dans la région.

3. Créer un conteneur
   Dans la page Web, nous devons créer un conteneur pour contenir le graphique. Vous pouvez utiliser un élément div comme conteneur et définir la largeur et la hauteur.

<div id="chart" style="width: 800px; height: 600px;"></div>

4. Définir les options du graphique
   Avant de dessiner le graphique, vous devez définir certaines options du graphique, telles que le titre, la légende, la couleur, etc. Voici un exemple d'option de graphique :

var option = {
  title: {
    text: '产品销售占比',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['地区1', '地区2', '地区3', '地区4', '地区5']
  },
  color: ['#2378e1', '#60a1bc', '#87d9ef', '#de742f', '#7dbb94']
};

Parmi eux, le titre représente le titre du graphique, la légende représente la légende, les données représentent le nom de la légende et la couleur représente la couleur du secteur.

5. Dessiner un graphique en rose
   Enfin, nous utilisons la méthode echarts.init de la bibliothèque ECharts, transmettons l'ID du conteneur, créons une instance de graphique et utilisons la méthode setOption pour définir les options et les données du graphique.

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

Grâce aux étapes ci-dessus, nous pouvons dessiner un diagramme de rose sur la page Web.

Résumé : cet article explique comment utiliser la bibliothèque ECharts pour dessiner un graphique en rose dans une page Web et fournit des exemples de code spécifiques. Grâce au graphique en roses, nous pouvons afficher visuellement la proportion de données et nous aider à effectuer l'analyse des données et à prendre des décisions. J'espère que cet article pourra aider les lecteurs à comprendre et à utiliser les graphiques en roses.

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!