Maison > Article > interface Web > Graphique en entonnoir ECharts : comment afficher les modifications apportées à l'entonnoir de données

Graphique en entonnoir ECharts : comment afficher les modifications apportées à l'entonnoir de données

WBOYoriginal: 2023-12-18 14:13:42933parcourir

Graphique en entonnoir ECharts : comment afficher les modifications apportées à lentonnoir de données

Graphique en entonnoir ECharts : comment afficher les modifications de l'entonnoir de données nécessite des exemples de code spécifiques

Introduction
Le graphique en entonnoir est une méthode de visualisation de données couramment utilisée qui peut être utilisée pour afficher les changements de processus ou l'analyse des données par étapes. ECharts est une bibliothèque de visualisation de données JavaScript open source qui peut être utilisée pour créer une variété de graphiques interactifs. Cet article expliquera comment utiliser ECharts pour afficher les modifications de l'entonnoir dans les données et fournira des exemples de code spécifiques.
Concepts de base du graphique en entonnoir ECharts
Un graphique en entonnoir est un type de graphique spécial utilisé pour représenter la forme en entonnoir des données. En règle générale, la largeur inférieure d'un graphique en entonnoir représente les données de départ, la largeur supérieure représente les données finales et la largeur de chaque étape intermédiaire représente les données intermédiaires. Les graphiques en entonnoir peuvent afficher avec précision les changements de processus des données, permettant au public de comprendre intuitivement la croissance ou la diminution des données.
Étapes pour utiliser le graphique en entonnoir ECharts
La création d'un graphique en entonnoir à l'aide d'ECharts peut généralement être divisée en les étapes suivantes :

3.1 Préparer les données
Tout d'abord, vous devez préparer les données qui doivent être affichées. Les données de chaque étape doivent contenir deux attributs, à savoir le nom de l'étape et la valeur de l'étape. Par exemple, nous pouvons avoir les données suivantes :

var data = [
    { name: '访问', value: 100 },
    { name: '浏览', value: 80 },
    { name: '点击', value: 60 },
    { name: '转化', value: 40 },
    { name: '下单', value: 20 },
    { name: '支付', value: 10 }
];

3.2 Créer une instance de graphique
Ensuite, vous devez créer une instance de graphique ECharts. Un exemple de graphique en entonnoir de base peut être créé avec le code suivant :

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

Ici, 'chart' est l'identifiant d'un élément HTML utilisé pour accueillir les graphiques ECharts. 'chart'是一个HTML元素的id，用于容纳ECharts图表。

3.3 配置漏斗图
ECharts提供了丰富的配置选项，可以用来自定义漏斗图的样式。以下是一个基本的漏斗图配置示例：

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 20
                }
            },
            data: data
        }
    ]
};

在上述配置中，我们可以设置tooltip的内容和格式，设置漏斗图的位置和大小，设置数据的排序方式和标签显示方式等。

3.4 渲染图表
最后，将配置应用到图表实例中，并使用setOption

3.3 Configuration du graphique en entonnoir

```
myChart.setOption(option);
```
Dans la configuration ci-dessus, nous pouvons définir le contenu et le format de l'info-bulle, définir la position et la taille du graphique en entonnoir, définir la méthode de tri des données et la méthode d'affichage des étiquettes, etc

3.4 Rendre le graphique

Enfin, appliquez la configuration à l'instance de graphique et utilisez la méthode setOption pour effectuer le rendu :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 漏斗图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var data = [
            { name: '访问', value: 100 },
            { name: '浏览', value: 80 },
            { name: '点击', value: 60 },
            { name: '转化', value: 40 },
            { name: '下单', value: 20 },
            { name: '支付', value: 10 }
        ];
        
        var myChart = echarts.init(document.getElementById('chart'));
        
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20
                        }
                    },
                    data: data
                }
            ]
        };
        
        myChart.setOption(option);
    </script>
</body>
</html>

Exemple de code complet
Ce qui suit est un code complet pour créer un graphique en entonnoir à l'aide Exemple ECharts :

rrreee🎜Avec le code ci-dessus, vous pouvez afficher un graphique en entonnoir dans le navigateur, puis analyser et explorer davantage les données grâce aux fonctions interactives fournies par ECharts. 🎜🎜🎜Résumé🎜Cet article présente les concepts de base et les étapes d'utilisation du graphique en entonnoir ECharts, et fournit des exemples de code spécifiques. J'espère que cet article pourra aider les lecteurs et leur donner une meilleure compréhension de la façon d'utiliser ECharts pour afficher les changements d'entonnoir de données dans les données. Bien entendu, ECharts possède de nombreuses autres fonctions puissantes que les lecteurs peuvent apprendre et explorer davantage. 🎜🎜

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!

JavaScript 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：Comment utiliser le système de coordonnées polaires pour afficher les données dans EChartsArticle suivant：Comment utiliser le système de coordonnées polaires pour afficher les données dans ECharts

Articles Liés

Voir plus