How to use box and whisker plots to display data distribution in ECharts

How to use box and whisker plots to display data distribution in ECharts

Introduction:
Data analysis and visualization are very important links in modern data science. During the data analysis process, we often need to visualize the distribution of data in order to better understand the characteristics and trends of the data. Boxplot is a commonly used visualization method that can clearly display important information such as statistical characteristics and outliers of data. This article will introduce how to use box and whisker plots to display data distribution in ECharts, and give specific code examples.

1. Introduction to ECharts:
ECharts is an open source data visualization library developed by Baidu and written in JavaScript. ECharts provides a wealth of chart types and interactive functions, which can easily realize various data visualization needs. In this article, we will use ECharts to draw box and whisker plots.

2. Data preparation:
Before displaying the data distribution, we need to prepare a set of data. The following is sample data, with a total of 100 sample points:

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. Draw box and whisker plots:
To draw box and whisker plots, we need to use the boxplot series of ECharts. The following is a sample code for ECharts configuration items:

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);

The data array in the above code is the sample data we prepared before. By populating the data into source, we can pass the data to the chart for plotting.

and yAxis in the configuration items are used to set the style and range of the X-axis and Y-axis respectively. It can be adjusted according to actual needs. type in

series is set to 'boxplot', which means we want to draw a box plot. tooltipThe function is used to set the prompt information when the mouse is hovering. Finally, we use

to initialize the chart and associate the chart to the specified container of the HTML page. 4. Effect display:

Conclusion:

References:

The above is the detailed content of How to use box and whisker plots to display data distribution in ECharts. For more information, please follow other related articles on the PHP Chinese website!