箱线图(Boxplot)实现

箱线图是一种用于展示数据分布情况的统计图表，能够直观显示数据的中位数、四分位数、异常值等关键统计量。ECharts 提供了强大的箱线图支持，通过简单的配置即可实现复杂的数据可视化效果。

箱线图的基本概念

箱线图由五个关键统计量组成：

1. 最小值（下边缘）
2. 第一四分位数（Q1）
3. 中位数（Q2）
4. 第三四分位数（Q3）
5. 最大值（上边缘）

在 ECharts 中，这些统计量可以通过 boxplot 系列直接指定，也可以让 ECharts 根据原始数据自动计算。异常值通常被定义为超出 1.5 倍四分位距（IQR）的数据点。

ECharts 箱线图的基本配置

以下是一个最简单的 ECharts 箱线图配置示例：

option = {
    dataset: {
        source: [
            [12, 15, 18, 22, 29, 35],
            [8, 14, 19, 24, 30, 38],
            [10, 16, 20, 25, 31, 40]
        ]
    },
    xAxis: {
        type: 'category',
        data: ['A组', 'B组', 'C组']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 0
    }]
};

在这个例子中，我们直接提供了每组数据的五个关键统计量。ECharts 会将这些数据渲染为标准的箱线图。

使用原始数据自动计算统计量

ECharts 也支持直接使用原始数据，自动计算统计量：

option = {
    dataset: {
        source: [
            // A组数据
            [12, 15, 18, 22, 29, 35, 8, 14, 19, 24, 30, 38],
            // B组数据
            [10, 16, 20, 25, 31, 40, 5, 12, 22, 28, 33, 42],
            // C组数据
            [11, 17, 21, 26, 32, 39, 7, 13, 23, 27, 34, 41]
        ]
    },
    xAxis: {
        type: 'category',
        data: ['A组', 'B组', 'C组']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 0,
        encode: {
            y: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
        }
    }]
};

通过 encode 配置项，我们告诉 ECharts 哪些列包含原始数据。ECharts 会自动计算每组数据的统计量并绘制箱线图。

自定义箱线图样式

ECharts 提供了丰富的样式配置选项：

series: [{
    type: 'boxplot',
    itemStyle: {
        color: '#c23531',
        borderColor: '#333',
        borderWidth: 2
    },
    emphasis: {
        itemStyle: {
            borderColor: '#000',
            borderWidth: 3
        }
    },
    boxWidth: [20, 30, 40] // 不同组的箱体宽度可以不同
}]

多系列箱线图

可以在同一图表中展示多个系列的箱线图：

option = {
    dataset: [{
        source: [
            // 系列1数据
            [12, 15, 18, 22, 29, 35],
            [8, 14, 19, 24, 30, 38],
            [10, 16, 20, 25, 31, 40]
        ]
    }, {
        source: [
            // 系列2数据
            [10, 13, 16, 20, 27, 33],
            [6, 12, 17, 22, 28, 36],
            [8, 14, 18, 23, 29, 38]
        ]
    }],
    xAxis: {
        type: 'category',
        data: ['A组', 'B组', 'C组']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '实验组',
        type: 'boxplot',
        datasetIndex: 0
    }, {
        name: '对照组',
        type: 'boxplot',
        datasetIndex: 1
    }]
};

箱线图与散点图结合

为了更直观地展示原始数据分布，可以将箱线图与散点图结合：

option = {
    dataset: {
        source: [
            // A组数据
            [12, 15, 18, 22, 29, 35, 8, 14, 19, 24, 30, 38],
            // B组数据
            [10, 16, 20, 25, 31, 40, 5, 12, 22, 28, 33, 42],
            // C组数据
            [11, 17, 21, 26, 32, 39, 7, 13, 23, 27, 34, 41]
        ]
    },
    xAxis: {
        type: 'category',
        data: ['A组', 'B组', 'C组']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 0,
        encode: {
            y: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
        }
    }, {
        name: '散点',
        type: 'scatter',
        datasetIndex: 0,
        encode: {
            x: 0,
            y: function (value, index) {
                // 将数据展平
                return value.slice(0, 12);
            }
        },
        symbolSize: 8,
        itemStyle: {
            color: '#666',
            opacity: 0.6
        }
    }]
};

交互功能

ECharts 箱线图支持丰富的交互功能：

option = {
    // ...其他配置...
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            const data = params.data;
            return `
                ${params.seriesName}<br/>
                最小值: ${data[0]}<br/>
                Q1: ${data[1]}<br/>
                中位数: ${data[2]}<br/>
                Q3: ${data[3]}<br/>
                最大值: ${data[4]}
            `;
        }
    }
};

大数据量优化

当处理大量数据时，可以使用 ECharts 的数据采样功能：

series: [{
    type: 'boxplot',
    large: true,
    largeThreshold: 1000, // 数据量大于1000时启用优化
    progressive: 200, // 增量渲染
    progressiveThreshold: 3000 // 数据量大于3000时启用增量渲染
}]

横向箱线图

通过交换 xAxis 和 yAxis 的配置，可以实现横向箱线图：

option = {
    dataset: {
        source: [
            [12, 15, 18, 22, 29, 35],
            [8, 14, 19, 24, 30, 38],
            [10, 16, 20, 25, 31, 40]
        ]
    },
    yAxis: {
        type: 'category',
        data: ['A组', 'B组', 'C组']
    },
    xAxis: {
        type: 'value'
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 0
    }]
};

高级应用：分组箱线图

实现分组箱线图需要一些额外的数据处理：

option = {
    dataset: {
        dimensions: ['product', 'season', 'sales'],
        source: [
            {product: '产品A', season: '春季', sales: 120},
            {product: '产品A', season: '夏季', sales: 150},
            // ...更多数据...
            {product: '产品B', season: '春季', sales: 80},
            {product: '产品B', season: '夏季', sales: 110},
            // ...更多数据...
        ]
    },
    xAxis: {
        type: 'category',
        data: ['春季', '夏季', '秋季', '冬季']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '产品A',
        type: 'boxplot',
        datasetIndex: 0,
        transform: {
            type: 'filter',
            config: {dimension: 'product', value: '产品A'}
        }
    }, {
        name: '产品B',
        type: 'boxplot',
        datasetIndex: 0,
        transform: {
            type: 'filter',
            config: {dimension: 'product', value: '产品B'}
        }
    }]
};