Graphique en entonnoir ECharts : comment afficher le taux de conversion des données

Graphique en entonnoir ECharts : Comment afficher le taux de conversion des données, des exemples de code spécifiques sont requis

Introduction :
Dans le domaine de la visualisation des données, le graphique en entonnoir est un type de graphique très couramment utilisé, qui peut afficher visuellement le processus de transformation et transformation du débit de données. En tant qu'outil puissant de visualisation de données, ECharts fournit également une fonction de dessin de graphiques en entonnoir. Cet article combinera des exemples de code spécifiques pour présenter en détail la méthode de dessin du graphique en entonnoir ECharts et comment afficher le taux de conversion des données.

1. La structure de base du graphique en entonnoir
   Le graphique en entonnoir présente différentes étapes de haut en bas, et chaque étape correspond à une certaine quantité de données. Ces étapes rétrécissent progressivement, formant la forme d’un entonnoir. Dans ECharts, les graphiques en entonnoir peuvent être spécifiés via l'attribut type en série.
2. Dessinez un graphique en entonnoir de base
   Tout d'abord, nous devons introduire le fichier de bibliothèque ECharts et initialiser une instance de graphique. Voici un exemple de code pour dessiner un graphique en entonnoir de base :

<!--引入ECharts的库文件-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

<!--在HTML中创建一个DOM容器，用于存放图表-->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>

<script>
  //实例化一个图表实例
  let myChart = echarts.init(document.getElementById('funnelChart'));

  //配置图表的基本信息
  let option = {
      title: {
          text: '漏斗图示例',
      },
      series: [{
          type: 'funnel',
          data: [
              {value: 60, name: '浏览量'},
              {value: 40, name: '点击量'},
              {value: 20, name: '购买量'},
              {value: 10, name: '转化率'}
          ]
      }]
  };

  //使用配置项显示图表
  myChart.setOption(option);
</script>

3. Afficher le taux de conversion des données
   Afin d'afficher le taux de conversion des données, nous pouvons ajouter une étiquette à chaque étape du graphique en entonnoir et personnaliser l'étiquette. via l'attribut du formateur Afficher le contenu. Voici un exemple de code montrant le taux de conversion des données :

let option = {
    title: {
        text: '漏斗图示例',
    },
    series: [{
        type: 'funnel',
        data: [
            {value: 60, name: '浏览量'},
            {value: 40, name: '点击量'},
            {value: 20, name: '购买量'},
            {value: 10, name: '转化率'}
        ],
        label: {
            formatter: '{b}：{c}%'
        }
    }]
};

En définissant l'attribut du formateur de l'étiquette sur '{b}:{c}%', nous pouvons convertir le nom (nom) et la valeur numérique (valeur) de les données ainsi que le signe de pourcentage (%) sont affichés ensemble dans l'étiquette de chaque étape. Par exemple, « Montant de l'achat : 20 % ».

Résumé :
Dans ECharts, nous pouvons dessiner un graphique en entonnoir grâce à une configuration simple et afficher le taux de conversion des données. En définissant l'attribut formateur de l'étiquette d'étiquette, nous pouvons personnaliser le contenu d'affichage de l'étiquette. J'espère que grâce à l'introduction de cet article, les lecteurs pourront comprendre la méthode de dessin de base du graphique en entonnoir ECharts et l'utiliser de manière 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!