Maison >interface Web >js tutoriel >Comment utiliser le graphique en forme de rose en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts

Comment utiliser le graphique en forme de rose en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts

王林original: 2023-12-18 08:10:101407parcourir

Comment utiliser le graphique en roses en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts

Aperçu :
Le graphique en roses en entonnoir est un graphique de visualisation de données couramment utilisé, qui peut afficher clairement la proportion de données et le taux de conversion. Dans ECharts, nous pouvons facilement obtenir l'effet d'affichage d'un graphique en forme de rose en entonnoir grâce à un traitement et une configuration simples des données. Cet article explique comment utiliser le graphique en forme de rose en entonnoir dans ECharts pour afficher la proportion de données et le taux de conversion, et fournit des exemples de code correspondants.

Étape 1 : Préparer les données
Tout d'abord, nous devons préparer les données à afficher. Supposons que nous ayons les données suivantes :

var data = [
  { value: 100, name: '阶段1' },
  { value: 80, name: '阶段2' },
  { value: 60, name: '阶段3' },
  { value: 40, name: '阶段4' },
  { value: 20, name: '阶段5' }
];

où valeur représente la quantité de données dans chaque étape et nom représente le nom de chaque étape.

Étape 2 : Configurer le graphique
Ensuite, nous devons configurer le style et les propriétés du graphique des roses en entonnoir. Voici un exemple de configuration simple :

var option = {
  series: [
    {
      name: '漏斗玫瑰图',
      type: 'pie',
      radius: ['40%', '55%'],
      center: ['50%', '50%'],
      roseType: 'radius',
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
};

Les points clés de la configuration incluent :

type spécifie le type de graphique comme « camembert », qui est un graphique à secteurs.
radius définit le rayon intérieur et extérieur du diagramme circulaire, représenté ici par un tableau. ['40%', '55%'] signifie que le rayon intérieur est de 40 % et le rayon extérieur est de 55 %.
center définit la position du point central du diagramme circulaire, qui est représenté ici par un tableau. ['50%', '50%'] signifie au centre de la toile.
roseType définit le type de graphique circulaire sur « rayon », qui représente un graphique en forme de rose en entonnoir.
data définit la source de données du diagramme circulaire. Les données préparées ci-dessus sont utilisées ici.

Étape 3 : Dessinez le graphique
Enfin, nous devons dessiner le graphique via l'instance ECharts. Dans la page HTML, nous créons une balise de script contenant le code suivant :

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

Dans le code ci-dessus, nous utilisons la méthode document.getElementById('chart') pour obtenir le div conteneur utilisé pour afficher le graphique dans la page HTML et transmettez-le Donnez la méthode echarts.init() pour créer une instance ECharts. Ensuite, nous appelons la méthode setOption() pour définir les éléments de configuration de l'instance.

En résumé, à travers les trois étapes ci-dessus, nous pouvons utiliser le graphique en forme de rose en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts. Le code complet est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>漏斗玫瑰图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
      var data = [
        { value: 100, name: '阶段1' },
        { value: 80, name: '阶段2' },
        { value: 60, name: '阶段3' },
        { value: 40, name: '阶段4' },
        { value: 20, name: '阶段5' }
      ];

      var option = {
        series: [
          {
            name: '漏斗玫瑰图',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]
      };

      var myChart = echarts.init(document.getElementById('chart'));
      myChart.setOption(option);
    </script>
  </body>
</html>

Grâce au code ci-dessus, exécutez la page HTML dans le navigateur et vous pourrez voir un graphique appelé "Funnel Rose Chart", montrant la proportion de données et le taux de conversion.

Conclusion :
Cet article explique comment utiliser le graphique en forme de rose en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts. Grâce à un traitement et une configuration simples des données, nous pouvons facilement obtenir l'effet d'affichage du graphique en roses en entonnoir. J'espère que les lecteurs pourront comprendre les compétences de base d'utilisation d'ECharts grâce à cet article, et les appliquer et les développer dans des projets réels de visualisation de données.

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!

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：Graphique ECharts Sankey Rose : Comment afficher le flux et la proportion de donnéesArticle suivant：Graphique ECharts Sankey Rose : Comment afficher le flux et la proportion de données

Articles Liés

Voir plus