Graphique en entonnoir ECharts : comment afficher le flux de données-js tutoriel-php.cn

Graphique en entonnoir ECharts : comment afficher le flux de données

WBOY

Libérer： 2023-12-18 14:37:06

original

966 Les gens l'ont consulté

Graphique en entonnoir ECharts : comment afficher le flux de données

Graphique en entonnoir ECharts : Comment montrer le processus de données, des exemples de code spécifiques sont nécessaires

Introduction

Avec l'avènement de l'ère du Big Data, l'analyse et la visualisation des données deviennent de plus en plus importantes. Dans le processus d’analyse des données, il est très essentiel de comprendre le processus et la transformation des données. ECharts est une puissante bibliothèque de visualisation de données qui peut nous aider à afficher visuellement les processus de données. Cet article se concentrera sur le graphique en entonnoir dans ECharts et montrera comment utiliser ECharts pour afficher le flux de données.

Caractéristiques du graphique en entonnoir

Le graphique en entonnoir est un graphique à barres spécial qui utilise un graphique en forme d'entonnoir pour afficher le flux et la transformation des données. Les caractéristiques du graphique en entonnoir sont les suivantes :

Il convient à l'affichage de processus de données par étapes, tels que le processus de conversion dans le canal de vente, le comportement des utilisateurs dans le journal d'accès au site Web, etc.
Les données diminuent progressivement de haut en bas, formant une forme d'entonnoir, qui peut refléter intuitivement les changements du taux de conversion.
Vous pouvez utiliser des blocs d'entonnoir de différentes couleurs pour représenter différentes étapes afin d'améliorer la lisibilité.

Utilisez ECharts pour dessiner un graphique en entonnoir

Ci-dessous, nous utilisons ECharts pour dessiner un exemple simple de graphique en entonnoir. Supposons que nous disposions de données sur un canal de vente comportant trois étapes : le nombre total de visites, les ajouts au panier et les achats réussis.

Tout d'abord, nous devons introduire le fichier de bibliothèque ECharts en HTML et créer un conteneur DIV avec une certaine largeur et hauteur pour afficher le graphique.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts漏斗图示例</title>
    <!-- 引入ECharts库文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个具备一定宽度和高度的DIV容器 -->
    <div id="funnelChart" style="width: 600px; height: 400px;"></div>
</body>
</html>

Copier après la connexion

Ensuite, utilisez l'API d'ECharts en JavaScript pour dessiner le graphique en entonnoir.

// 使用ECharts的API绘制漏斗图
var chartDom = document.getElementById('funnelChart');
var myChart = echarts.init(chartDom);

var option;

// 指定漏斗图的配置项和数据
option = {
    title: {
        text: '销售渠道转化漏斗图',
        subtext: '示例数据'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['总访问量', '添加购物车量', '成功购买量']
    },
    series: [
        {
            name: '转化率',
            type: 'funnel',
            left: '10%',
            top: 60,
            // 指定各个阶段的具体数值
            data: [
                {value: 1000, name: '总访问量'},
                {value: 800, name: '添加购物车量'},
                {value: 500, name: '成功购买量'}
            ],
            // 设置漏斗图的属性
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            // 指定漏斗图的标签样式
            label: {
                position: 'inside',
                formatter: '{c}'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
option && myChart.setOption(option);

Copier après la connexion

Dans le code ci-dessus, nous utilisons l'API ECharts pour créer un graphique en entonnoir, spécifiant les valeurset les étiquettes correspondantes pour chaque étape. En définissant les propriétés et les styles d'étiquette du graphique en entonnoir, nous pouvons obtenir une meilleure visualisation du graphique en entonnoir. Enfin, utilisez la méthode setOption pour appliquer des éléments de configuration et des données au graphique afin d'afficher le graphique.

Résumé

ECharts est une puissante bibliothèque de visualisation de données qui peut nous aider à afficher visuellement les processus et les transformations des données. Cet article se concentre sur les caractéristiques du graphique en entonnoir dans ECharts, sur la façon de dessiner le graphique en entonnoir et fournit des exemples de code spécifiques. Grâce à l'apprentissage et à la pratique, nous pouvons mieux utiliser ECharts pour afficher le processus de données pendant le processus d'analyse des données et améliorer l'efficacité et la précision de l'analyse des données.

(Remarque : l'exemple de code ci-dessus utilise la version 4.9.0 d'ECharts. Si vous devez utiliser d'autres versions, vous pouvez l'ajuster en fonction de la situation réelle.)

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!