Graphique en entonnoir ECharts (multi-niveaux) : comment afficher le flux de données et le taux de conversion

Graphique en entonnoir ECharts (multi-niveaux) : Comment afficher le flux de données et le taux de conversion, des exemples de code spécifiques sont nécessaires

Introduction :
Avec le développement d'Internet et de l'analyse des données, l'analyse et l'affichage des flux de données et le taux de conversion est devenu de plus en plus important. ECharts est une bibliothèque de visualisation de données basée sur JavaScript qui fournit une variété de types de graphiques que les développeurs peuvent utiliser. Parmi eux, le graphique en entonnoir est l’un des types de graphiques couramment utilisés pour afficher le flux de données et le taux de conversion. Cet article explique comment utiliser ECharts pour créer un graphique en entonnoir à plusieurs niveaux et donne des exemples de code spécifiques.

1. Qu'est-ce qu'un graphique en entonnoir à plusieurs niveaux ? Le graphique en entonnoir à plusieurs niveaux est une extension du graphique en entonnoir traditionnel et peut afficher les processus de données et les taux de conversion en plusieurs étapes. L'entonnoir à chaque étape représente un processus et il existe une relation de taux de conversion entre deux entonnoirs adjacents. Les graphiques en entonnoir à plusieurs niveaux peuvent afficher de manière plus intuitive la direction du flux et l'effet de transformation des données, nous aidant ainsi à mieux comprendre le processus de transformation des données.

1. Installation d'ECharts

   Tout d'abord, nous devons installer la bibliothèque ECharts dans le projet. Vous pouvez utiliser npm pour installer, la commande est la suivante :
   

   npm install echarts --save

   Copier après la connexion

2. Introduisez la bibliothèque ECharts

   Introduisez la bibliothèque ECharts dans la page que vous devez utiliser, vous pouvez l'introduire directement dans la page html :
   

   <script src="echarts.min.js"></script>

   Copier après la connexion

3. Préparez le conteneur

   Préparez un conteneur dans la page html, utilisé pour afficher des graphiques en entonnoir à plusieurs niveaux. Par exemple :
   

   <div id="chartContainer1" style="width: 600px;height: 400px;"></div>

   Copier après la connexion

Écrire du code JavaScript
4. Dans le code JavaScript, nous devons d'abord obtenir le conteneur préparé et créer une instance ECharts. Ensuite, configurez les paramètres pertinents du graphique en entonnoir à plusieurs niveaux, notamment les données, le style, le taux de conversion et d'autres informations. Enfin, transmettez les paramètres configurés dans l’instance et affichez le graphique.
   

// 获取容器
var container = document.getElementById('chartContainer1');
// 创建ECharts实例
var myChart = echarts.init(container);
// 配置参数
var option = {
    title: {
        text: '多级漏斗图',
        subtext: '数据流程和转化率'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: true,
        feature: {
            magicType: {
                type: ['funnel', 'pyramid']
            },
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['阶段1', '阶段2', '阶段3']
    },
    calculable: true,
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
                normal: {
                    formatter: '{b} : {c}%'
                }
            },
            data: [
                {value: 60, name: '阶段1'},
                {value: 40, name: '阶段2'},
                {value: 20, name: '阶段3'}
            ]
        }
    ]
};
// 渲染图表
myChart.setOption(option);

Affichage de l'effet d'exécution
5. Enregistrez le code ci-dessus et ouvrez le fichier html dans le navigateur pour voir le graphique en entonnoir à plusieurs niveaux généré.
   

ECharts fournit une multitude de types de graphiques que les développeurs peuvent utiliser en configurant les paramètres pertinents, une variété de graphiques de visualisation de données peuvent être produits. Les graphiques en entonnoir à plusieurs niveaux peuvent afficher visuellement le processus de données et le taux de conversion, nous aidant ainsi à mieux comprendre le processus de conversion des données. Grâce aux étapes et aux exemples de code présentés dans cet article, nous pouvons rapidement créer un graphique en entonnoir à plusieurs niveaux. J'espère que cet article pourra être utile à l'apprentissage et à la pratique de chacun en matière 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!