当您需要分析数据的离散程度并识别各组中的异常数据点时，箱线图（或称为箱须图）是标准的统计可视化工具。通过将连续数据总结为五个关键数值——最小值、第一四分位数（Q1）、中位数（Q2）、第三四分位数（Q3）和最大值——箱线图能够清晰展示偏度、变异性和极端异常值一目了然，而无需在屏幕上堆叠原始数据。
箱线图的工作原理
在 Apache ECharts 中，统计箱体通过使用type: 'boxplot'来渲染。每个数据集条目期望一个包含5个元素的数值数组，按以下顺序排列：[最小值, Q1, 中位数, Q3, 最大值]。ECharts 还内置了数据预处理工具，可直接从原始数值计算这些统计边界。
1. 基础设置
要构建一个基本的箱线图，需将类别映射到 X 轴，并在系列数据中提供计算好的五数概括数组：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'category',
data: ['类别 1', '类别 2', '类别 3', '类别 4', '类别 5']
},
yAxis: {
type: 'value',
name: '分布值'
},
series: [
{
name: '箱线图',
type: 'boxplot',
data: [
[655, 850, 940, 980, 1070], // [最小值, Q1, 中位数, Q3, 最大值]
[760, 800, 845, 885, 960],
[780, 840, 855, 880, 940],
[720, 767, 815, 865, 920],
[890, 920, 950, 970, 990]
]
}
]
};
高级结构技术
您可以叠加异常值散点图，或为名称较长的类别构建水平箱线图。
1. 水平箱线图布局
设置yAxis为类别刻度，xAxis为数值刻度，以将箱线图水平翻转，从而提升标签的可读性：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['服务器 Alpha', '服务器 Beta', '服务器 Gamma']
},
series: [
{
name: '延迟 (毫秒)',
type: 'boxplot',
data: [
[12, 18, 22, 28, 35],
[15, 24, 30, 38, 48],
[8, 12, 15, 20, 27]
],
itemStyle: {
color: '#e0f2fe',
borderColor: '#0284c7',
borderWidth: 2
}
}
]
};
微调布局和样式
自定义箱线图颜色、须线宽度和中位线格式，可提升复杂仪表板布局中的视觉区分度。
1. 自定义箱体填充和异常值样式
调整箱体边框、填充颜色和须线属性，以匹配您的界面设计：
ECharts
Edit ECharts in VPasCode
option = {
grid: {
left: '10%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['A组', 'B组', 'C组']
},
yAxis: {
type: 'value'
},
series: [
{
name: '分数分布',
type: 'boxplot',
boxWidth: ['20%', '50%'], // 响应式箱体宽度边界
itemStyle: {
color: '#f0fdf4',
borderColor: '#16a34a',
borderWidth: 2
},
data: [
[40, 55, 68, 82, 95],
[50, 62, 75, 88, 98],
[30, 45, 58, 70, 85]
]
}
]
};
战略最佳实践
- 双重检查汇总顺序： 确保数组值遵循严格的顺序：
[最小值, Q1, 中位数, Q3, 最大值]。顺序错误将导致渲染异常。 - 使用散点系列叠加显示异常值： 使用一个次要
散点系列叠加在箱线图之上，将极端统计异常值以独立数据点的形式显示。 - 调整网格内边距： 确保足够的
grid.bottom或grid.left内边距，以避免长类别名称与须线发生重叠。