箱线图(Boxplot)实现

箱线图(Boxplot)实现

箱线图是一种用于展示数据分布情况的统计图表，能够直观显示数据的中位数、四分位数、异常值等关键统计量。ECharts提供了强大的箱线图绘制功能，支持多种配置选项和交互方式。

基本箱线图实现

在ECharts中创建基本箱线图需要准备符合特定格式的数据。箱线图数据通常包含多个维度的统计值：

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 '类别 ' + params.value;
            } }
        }
    }],
    title: {
        text: '基础箱线图示例',
        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: '数值',
        splitArea: {
            show: true
        }
    },
    series: [{
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 1
    }]
};

多系列箱线图配置

ECharts支持在同一图表中展示多个系列的箱线图，便于对比分析：

option = {
    dataset: [{
        source: [
            // 系列1数据
            [650, 700, 750, 800, 850, 900, 950, 1000, 1050],
            // 系列2数据
            [550, 600, 650, 700, 750, 800, 850, 900, 950],
            // 系列3数据
            [450, 500, 550, 600, 650, 700, 750, 800, 850]
        ]
    }, {
        transform: {
            type: 'boxplot',
            config: {
                itemNameFormatter: function (params) {
                    return ['第一季度', '第二季度', '第三季度'][params.value];
                }
            }
        }
    }],
    legend: {
        data: ['产品A', '产品B', '产品C'],
        top: '10%'
    },
    series: [
        {
            name: '产品A',
            type: 'boxplot',
            datasetIndex: 1,
            itemStyle: {
                color: '#c23531'
            }
        },
        {
            name: '产品B',
            type: 'boxplot',
            datasetIndex: 1,
            itemStyle: {
                color: '#2f4554'
            }
        },
        {
            name: '产品C',
            type: 'boxplot',
            datasetIndex: 1,
            itemStyle: {
                color: '#61a0a8'
            }
        }
    ]
};

箱线图样式自定义

ECharts提供了丰富的样式配置选项来自定义箱线图外观：

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], // 箱体宽度范围
    layout: 'horizontal', // 或'vertical'
    whiskerStyle: {
        lineStyle: {
            type: 'dashed',
            width: 2
        }
    },
    outlierStyle: {
        color: '#FF0000',
        symbolSize: 8
    }
}]

箱线图与散点图结合

在实际应用中，经常需要将箱线图与原始数据点结合展示：

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 ['实验组1', '实验组2', '实验组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'
        }
    }]
};

交互功能增强

ECharts箱线图支持多种交互功能，可以通过配置实现丰富的用户体验：

option = {
    // ...其他配置...
    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 + ':',
                '最小值: ' + data[1],
                '下四分位数: ' + data[2],
                '中位数: ' + data[3],
                '上四分位数: ' + data[4],
                '最大值: ' + data[5]
            ].join('<br/>');
        }
    }
};

大数据量优化策略

当处理大规模数据集时，可以采用以下优化策略：

option = {
    // ...其他配置...
    series: [{
        type: 'boxplot',
        large: true,
        largeThreshold: 500, // 数据量大于500时启用优化
        progressive: 400,
        progressiveThreshold: 3000,
        progressiveChunkMode: 'mod',
        animation: false,
        clip: true
    }]
};

动态数据更新

ECharts支持箱线图的动态数据更新，便于实现实时监控场景：

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// 模拟动态数据更新
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;
}

多坐标系组合

箱线图可以与其他图表类型组合使用，共享或分离坐标系：

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]
            ]
        }
    ]
};

响应式设计实现

为了使箱线图在不同设备上都能良好显示，可以配置响应式规则：

option = {
    // ...基础配置...
    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]
                }]
            }
        }
    ]
};