Comment utiliser les diagrammes en boîte et en moustaches pour afficher la distribution des données dans ECharts

Comment utiliser les diagrammes en boîte et en moustaches pour afficher la distribution des données dans ECharts

Introduction :
L'analyse et la visualisation des données sont des aspects très importants dans la science des données moderne. Au cours du processus d'analyse des données, nous avons souvent besoin de visualiser la distribution des données afin de mieux comprendre les caractéristiques et les tendances des données. Le boxplot est une méthode de visualisation couramment utilisée qui peut afficher clairement des informations importantes telles que les caractéristiques statistiques et les valeurs aberrantes des données. Cet article explique comment utiliser les diagrammes en boîte et en moustaches pour afficher la distribution des données dans ECharts et donne des exemples de code spécifiques.

1. Introduction à ECharts :
ECharts est une bibliothèque de visualisation de données open source développée par Baidu et écrite en JavaScript. ECharts fournit une multitude de types de graphiques et de fonctions interactives, qui peuvent facilement répondre à divers besoins de visualisation de données. Dans cet article, nous utiliserons ECharts pour dessiner des diagrammes en boîtes et en moustaches.

2. Préparation des données :
Avant d'afficher la distribution des données, nous devons préparer un ensemble de données. Voici des exemples de données, avec un total de 100 points d'échantillonnage :

var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 
            150, 160, 170, 180, 190, 200, 250, 260, 270, 280, 
            300, 320, 340, 360, 380, 400, 450, 460, 470, 480, 
            500, 520, 540, 560, 580, 600, 650, 660, 670, 680, 
            700, 720, 740, 760, 780, 800, 850, 860, 870, 880, 
            900, 920, 940, 960, 980, 1000, 1050, 1060, 1070, 1080, 
            1100, 1120, 1140, 1160, 1180, 1200, 1250, 1260, 1270, 1280, 
            1300, 1320, 1340, 1360, 1380, 1400, 1450, 1460, 1470, 1480, 
            1500, 1520, 1540, 1560, 1580, 1600, 1650, 1660, 1670, 1680, 
            1700, 1720, 1740, 1760, 1780, 1800, 1850, 1860, 1870, 1880];

3. Dessinez des diagrammes en boîtes et des moustaches :
Pour dessiner des diagrammes en boîtes et des moustaches, nous devons utiliser la série de diagrammes en boîtes d'ECharts. Voici un exemple de code pour les éléments de configuration ECharts :

var option = {
    dataset: [{
        dimensions: ['value'],
        source: data
    }],
    grid: {
        left: '10%',
        right: '10%',
        top: '15%',
        bottom: '10%'
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        data: ['']
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 2000,
        axisLabel: {
            formatter: '{value}'
        }
    }],
    series: [{
        type: 'boxplot',
        tooltip: {
            formatter: function (params) {
                return [
                    '最大值：' + params.data[5],
                    '上四分位数：' + params.data[4],
                    '中位数：' + params.data[3],
                    '下四分位数：' + params.data[2],
                    '最小值：' + params.data[1]
                ].join('<br/>');
            }
        }
    }]
};

var myChart = echarts.init(document.getElementById('boxplot'));
myChart.setOption(option);

Le tableau data dans le code ci-dessus correspond aux exemples de données que nous avons préparés auparavant. En remplissant la source avec des données, nous pouvons transmettre les données au graphique pour le traçage. data数组是我们之前准备好的样本数据。通过将数据填充到source中，我们可以将数据传递给图表进行绘制。

配置项中的xAxis和yAxis分别用于设置X轴和Y轴的样式和范围。可以根据实际需求进行调整。

series中的type设为'boxplot'，表示我们要绘制的是箱型图。tooltip函数用于设置鼠标悬停时的提示信息。

最后，我们使用echarts.init

xAxis et yAxis dans les éléments de configuration sont utilisés pour définir respectivement le style et la plage de l'axe X et de l'axe Y. Il peut être ajusté en fonction des besoins réels.

Définissez le type dans series sur 'boxplot', ce qui signifie que nous voulons dessiner une boîte à moustaches. La fonction tooltip est utilisée pour définir les informations d'invite lorsque la souris survole.

Enfin, nous utilisons echarts.init pour initialiser le graphique et associer le graphique au conteneur spécifié de la page HTML.

4. Affichage des effets :

Grâce aux éléments de configuration et au code ci-dessus, nous pouvons dessiner un graphique en boîtes et en moustaches dans ECharts. L'intégration du graphique dans une page Web HTML peut montrer la distribution des données que nous avons préparée.

Conclusion :
• Cet article explique comment utiliser les diagrammes en boîte et en moustaches pour afficher la distribution des données dans ECharts. Grâce au box plot d'ECharts, nous pouvons comprendre intuitivement les caractéristiques statistiques des données, afin de mieux effectuer l'analyse des données et la prise de décision. J'espère que cet article vous a été utile dans l'utilisation des diagrammes en boîte et en moustaches pour la visualisation des données.

Référence : 🎜🎜🎜Document officiel ECharts : https://echarts.apache.org/zh/index.html🎜🎜

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!