Comment utiliser le graphique en forme de rose en entonnoir pour afficher la proportion de données et le taux de conversion dans ECharts-js tutoriel-php.cn

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

王林

Libérer： 2023-12-18 08:10:10

original

1367 Les gens l'ont consulté

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 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' }
];

Copier après la connexion

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
    }
  ]
};

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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!