如何在Vue2中使用Apache ECharts将周度数据按月份分组并绘制折线图

架构老林

2026-9-24

解决方法

你可以通过修改 ECharts 的 xAxis.axisLabel 配置实现按月份显示标签的需求，核心逻辑是根据周索引匹配对应的月份，控制仅在月份区间的中间位置显示月份标签，同时可添加分隔线区分不同月份的区间。

首先定义月份缩写数组：

const monthAbbrs = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

然后修改你的 options 中的 xAxis 配置如下：

xAxis: {
  type: 'category',
  boundaryGap: false,
  data: monthNames, // 保留原有的1-52周作为类目数据
  axisLabel: {
    // 控制仅在每个月的中间周位置显示标签
    interval: (index) => index % 4 === 1,
    // 匹配索引返回对应的月份缩写，其余位置返回空
    formatter: (value, index) => {
      const monthIndex = Math.floor(index / 4)
      return monthIndex < 12 ? monthAbbrs[monthIndex] : ''
    },
    align: 'center' // 标签居中对齐
  },
  // 可选：添加月份分隔竖线，更清晰区分不同月份的区间
  splitLine: {
    show: true,
    interval: (index) => index % 4 === 3
  }
}