Boxplot

Boxplot Implementation

A boxplot is a statistical chart used to display data distribution, intuitively showing key statistical measures such as median, quartiles, and outliers. ECharts provides powerful boxplot rendering capabilities, supporting various configuration options and interactive methods.

Basic Boxplot Implementation

Creating a basic boxplot in ECharts requires preparing data in a specific format. Boxplot data typically includes statistical values across multiple dimensions:

option = {  
    dataset: [{  
        source: [  
            [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980],  
            [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790],  
            [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910]  
        ]  
    }, {  
        transform: {  
            type: 'boxplot',  
            config: { itemNameFormatter: function (params) {  
                return 'Category ' + params.value;  
            } }  
        }  
    }],  
    title: {  
        text: 'Basic Boxplot Example',  
        left: 'center'  
    },  
    tooltip: {  
        trigger: 'item',  
        axisPointer: {  
            type: 'shadow'  
        }  
    },  
    grid: {  
        left: '10%',  
        right: '10%',  
        bottom: '15%'  
    },  
    xAxis: {  
        type: 'category',  
        boundaryGap: true,  
        nameGap: 30,  
        splitArea: {  
            show: false  
        },  
        splitLine: {  
            show: false  
        }  
    },  
    yAxis: {  
        type: 'value',  
        name: 'Value',  
        splitArea: {  
            show: true  
        }  
    },  
    series: [{  
        name: 'boxplot',  
        type: 'boxplot',  
        datasetIndex: 1  
    }]  
};  

Multi-Series Boxplot Configuration

ECharts supports displaying multiple series of boxplots in the same chart for comparative analysis:

option = {  
    dataset: [{  
        source: [  
            // Series 1 data  
            [650, 700, 750, 800, 850, 900, 950, 1000, 1050],  
            // Series 2 data  
            [550, 600, 650, 700, 750, 800, 850, 900, 950],  
            // Series 3 data  
            [450, 500, 550, 600, 650, 700, 750, 800, 850]  
        ]  
    }, {  
        transform: {  
            type: 'boxplot',  
            config: {  
                itemNameFormatter: function (params) {  
                    return ['Q1', 'Q2', 'Q3'][params.value];  
                }  
            }  
        }  
    }],  
    legend: {  
        data: ['Product A', 'Product B', 'Product C'],  
        top: '10%'  
    },  
    series: [  
        {  
            name: 'Product A',  
            type: 'boxplot',  
            datasetIndex: 1,  
            itemStyle: {  
                color: '#c23531'  
            }  
        },  
        {  
            name: 'Product B',  
            type: 'boxplot',  
            datasetIndex: 1,  
            itemStyle: {  
                color: '#2f4554'  
            }  
        },  
        {  
            name: 'Product C',  
            type: 'boxplot',  
            datasetIndex: 1,  
            itemStyle: {  
                color: '#61a0a8'  
            }  
        }  
    ]  
};  

Boxplot Style Customization

ECharts offers rich styling options to customize the appearance of boxplots:

series: [{  
    type: 'boxplot',  
    itemStyle: {  
        color: '#1E90FF',  
        borderColor: '#006400',  
        borderWidth: 2,  
        shadowColor: 'rgba(0, 0, 0, 0.5)',  
        shadowBlur: 10  
    },  
    emphasis: {  
        itemStyle: {  
            borderColor: '#FF4500',  
            borderWidth: 3  
        }  
    },  
    boxWidth: [20, 50], // Box width range  
    layout: 'horizontal', // or 'vertical'  
    whiskerStyle: {  
        lineStyle: {  
            type: 'dashed',  
            width: 2  
        }  
    },  
    outlierStyle: {  
        color: '#FF0000',  
        symbolSize: 8  
    }  
}]  

Combining Boxplots with Scatter Plots

In practical applications, boxplots are often combined with raw data points for display:

option = {  
    dataset: [{  
        source: [  
            [1, 154, 190, 210, 246, 280, 320],  
            [2, 144, 180, 200, 236, 270, 310],  
            [3, 134, 170, 190, 226, 260, 300]  
        ]  
    }, {  
        transform: {  
            type: 'boxplot',  
            config: {  
                itemNameFormatter: function (params) {  
                    return ['Group 1', 'Group 2', 'Group 3'][params.value - 1];  
                }  
            }  
        }  
    }, {  
        fromDatasetIndex: 0,  
        fromTransformResult: 1  
    }],  
    series: [{  
        name: 'boxplot',  
        type: 'boxplot',  
        datasetIndex: 1  
    }, {  
        name: 'outlier',  
        type: 'scatter',  
        datasetIndex: 2,  
        symbolSize: 6,  
        itemStyle: {  
            color: '#f00'  
        }  
    }]  
};  

Enhanced Interactivity

ECharts boxplots support various interactive features for a rich user experience:

option = {  
    // ...other configurations...  
    toolbox: {  
        feature: {  
            dataZoom: {  
                yAxisIndex: 'none'  
            },  
            restore: {},  
            saveAsImage: {}  
        }  
    },  
    dataZoom: [  
        {  
            type: 'slider',  
            filterMode: 'filter',  
            xAxisIndex: 0,  
            start: 0,  
            end: 100  
        },  
        {  
            type: 'inside',  
            filterMode: 'filter',  
            xAxisIndex: 0  
        }  
    ],  
    tooltip: {  
        trigger: 'item',  
        formatter: function (params) {  
            var data = params.data;  
            return [  
                params.name + ':',  
                'Min: ' + data[1],  
                'Q1: ' + data[2],  
                'Median: ' + data[3],  
                'Q3: ' + data[4],  
                'Max: ' + data[5]  
            ].join('<br/>');  
        }  
    }  
};  

Optimization Strategies for Large Datasets

When handling large datasets, the following optimization strategies can be applied:

option = {  
    // ...other configurations...  
    series: [{  
        type: 'boxplot',  
        large: true,  
        largeThreshold: 500, // Enable optimization when data exceeds 500  
        progressive: 400,  
        progressiveThreshold: 3000,  
        progressiveChunkMode: 'mod',  
        animation: false,  
        clip: true  
    }]  
};  

Dynamic Data Updates

ECharts supports dynamic updates for boxplots, useful for real-time monitoring scenarios:

// Initialize the chart  
var myChart = echarts.init(document.getElementById('main'));  
myChart.setOption(option);  

// Simulate dynamic data updates  
setInterval(function () {  
    var newData = generateRandomBoxplotData();  
    myChart.setOption({  
        dataset: [{  
            source: newData  
        }]  
    });  
}, 2000);  

function generateRandomBoxplotData() {  
    var data = [];  
    for (var i = 0; i < 5; i++) {  
        var min = Math.round(Math.random() * 100);  
        var q1 = min + Math.round(Math.random() * 50);  
        var median = q1 + Math.round(Math.random() * 50);  
        var q3 = median + Math.round(Math.random() * 50);  
        var max = q3 + Math.round(Math.random() * 100);  
        data.push([i, min, q1, median, q3, max]);  
    }  
    return data;  
}  

Multi-Coordinate System Combination

Boxplots can be combined with other chart types, sharing or separating coordinate systems:

option = {  
    grid: [  
        {left: '10%', right: '55%', top: '10%', bottom: '60%'},  
        {left: '10%', right: '55%', top: '70%', bottom: '20%'},  
        {left: '60%', right: '10%', top: '10%', bottom: '60%'},  
        {left: '60%', right: '10%', top: '70%', bottom: '20%'}  
    ],  
    xAxis: [  
        {gridIndex: 0, type: 'category'},  
        {gridIndex: 1, type: 'category'},  
        {gridIndex: 2, type: 'value'},  
        {gridIndex: 3, type: 'value'}  
    ],  
    yAxis: [  
        {gridIndex: 0, type: 'value'},  
        {gridIndex: 1, type: 'value'},  
        {gridIndex: 2, type: 'category'},  
        {gridIndex: 3, type: 'category'}  
    ],  
    series: [  
        {  
            type: 'boxplot',  
            xAxisIndex: 0,  
            yAxisIndex: 0,  
            data: [  
                [1, 850, 1100, 1400, 1700, 2000],  
                [2, 800, 1000, 1300, 1600, 1900]  
            ]  
        },  
        {  
            type: 'boxplot',  
            xAxisIndex: 1,  
            yAxisIndex: 1,  
            data: [  
                [1, 700, 900, 1200, 1500, 1800],  
                [2, 750, 950, 1250, 1550, 1850]  
            ]  
        },  
        {  
            type: 'boxplot',  
            xAxisIndex: 2,  
            yAxisIndex: 2,  
            layout: 'horizontal',  
            data: [  
                [1, 850, 1100, 1400, 1700, 2000],  
                [2, 800, 1000, 1300, 1600, 1900]  
            ]  
        },  
        {  
            type: 'boxplot',  
            xAxisIndex: 3,  
            yAxisIndex: 3,  
            layout: 'horizontal',  
            data: [  
                [1, 700, 900, 1200, 1500, 1800],  
                [2, 750, 950, 1250, 1550, 1850]  
            ]  
        }  
    ]  
};  

Responsive Design Implementation

To ensure boxplots display well on different devices, responsive rules can be configured:

option = {  
    // ...basic configurations...  
    media: [  
        {  
            query: {  
                maxWidth: 600  
            },  
            option: {  
                series: [{  
                    boxWidth: [15, 30],  
                    itemStyle: {  
                        borderWidth: 1  
                    },  
                    whiskerStyle: {  
                        lineStyle: {  
                            width: 1  
                        }  
                    }  
                }],  
                grid: {  
                    left: '5%',  
                    right: '5%',  
                    top: '15%',  
                    bottom: '15%'  
                }  
            }  
        },  
        {  
            query: {  
                minWidth: 601  
            },  
            option: {  
                series: [{  
                    boxWidth: [20, 50]  
                }]  
            }  
        }  
    ]  
};