Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts

Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts

Pengenalan:
Analisis dan visualisasi data adalah aspek yang sangat penting dalam sains data moden. Semasa proses analisis data, kita selalunya perlu memvisualisasikan pengagihan data untuk lebih memahami ciri dan arah aliran data. Boxplot ialah kaedah visualisasi yang biasa digunakan yang boleh memaparkan maklumat penting seperti ciri statistik dan outlier data dengan jelas. Artikel ini akan memperkenalkan cara menggunakan plot kotak dan kumis untuk memaparkan pengedaran data dalam ECharts dan memberikan contoh kod khusus.

1. Pengenalan kepada ECharts:
ECharts ialah perpustakaan visualisasi data sumber terbuka yang dibangunkan oleh Baidu dan ditulis dalam JavaScript. ECharts menyediakan pelbagai jenis carta dan fungsi interaktif, yang boleh merealisasikan pelbagai keperluan visualisasi data dengan mudah. Dalam artikel ini, kami akan menggunakan ECharts untuk melukis plot kotak dan misai.

2. Penyediaan data:
Sebelum memaparkan pengedaran data, kita perlu menyediakan satu set data. Berikut adalah data sampel, dengan jumlah 100 titik sampel:

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. Lukis plot kotak dan whisker:
Untuk melukis plot kotak dan whisker, kita perlu menggunakan siri boxplot ECharts. Berikut ialah kod sampel untuk item konfigurasi 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);

Tatasusunan data dalam kod di atas ialah data sampel yang kami sediakan sebelum ini. Dengan mengisi source dengan data, kami boleh menghantar data ke carta untuk diplot. data数组是我们之前准备好的样本数据。通过将数据填充到source中，我们可以将数据传递给图表进行绘制。

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

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

最后，我们使用echarts.init

Atas ialah kandungan terperinci Cara menggunakan plot kotak dan whisker untuk memaparkan pengedaran data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!