如何在ECharts v5.4中修改箱线图的坐标轴名称

要把X轴的类目设置为「1A, 5B, 20C, 60D, 500F」，只需在ECharts配置的xAxis项中指定类目数据即可，具体实现如下：

• 将xAxis.type设为'category'（箱线图默认X轴可能为数值轴，需切换为类目轴）
• 在xAxis.data中传入目标名称数组：['1A', '5B', '20C', '60D', '500F']

修改后的完整代码示例 #

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('main'));

// 每个类目对应的箱线图数据（格式：[最小值, 下四分位数, 中位数, 上四分位数, 最大值]）
const boxPlotData = [
    [62, 71, 76, 84, 96],
    [51, 66, 72, 81, 92],
    [42, 57, 66, 74, 86],
    [31, 46, 56, 66, 77],
    [22, 36, 47, 56, 67]
];

const option = {
    title: { text: '自定义X轴类目箱线图' },
    tooltip: { trigger: 'item' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
        type: 'category',
        data: ['1A', '5B', '20C', '60D', '500F'], // 此处设置自定义X轴类目名称
        axisLabel: {
            fontSize: 12 // 可按需调整标签字体大小
        }
    },
    yAxis: {
        type: 'value',
        name: '测量值'
    },
    series: [
        {
            name: '数据分布',
            type: 'boxplot',
            data: boxPlotData,
            itemStyle: {
                color: '#3398DB'
            }
        }
    ]
};

// 渲染图表
myChart.setOption(option);

关键注意点 #

• 若你的原始代码中xAxis已经是类目轴，仅替换data数组即可完成修改；
• series.data的数组长度必须和xAxis.data的长度一致，每个元素对应一个类目的箱线数据；
• 如需调整X轴标签的样式（如颜色、旋转角度），可在xAxis.axisLabel中添加对应配置项。

内容的提问来源于stack exchange，提问作者Zcb991