如何在各个月份对每周数据进行分组并使用 Apache Echarts 进行绘图答案

【问题标题】：How to group weekly data in it respective months and plot using Apache Echarts如何在各个月份对每周数据进行分组并使用 Apache Echarts 进行绘图
【发布时间】：2022-01-09 23:04:51
【问题描述】：

我有过去 5 年、去年和今年迄今为止的每周平均值。

我想在折线图中显示它们，但在 xaxis 中显示相应的月份...

例如并基于今年：

一月有 4 周，所以 xaxis 显示 jan，图表中有 4 个标记代表第 1、2、3 和 4 周；

2 月也有 4 周，所以 xaxis 显示 2 月，图表中有 3 个标记代表第 5、6、7 和 8 周；等等；

我正在使用：

VueJs: 2.6.10
Echarts: 4.9.0

这是我的代码：

// var motnhNames = [
//   'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
//   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
// ]
var monthNames = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
  39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52
]

var options = {
  title: {
    text: 'My data'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['5 Years', 'Last Year', 'YTD']
  },
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ['line', 'bar']
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: monthNames
  },
  yAxis: {
    type: 'value',
  },
  series: [{
      name: '5 Years',
      type: 'line',
      data: [
        19, 46, 34, 33, 16, 3, 6, 33, 20,
        25, 5, 29, 48, 36, 1, 28, 48, 1,
        34, 22, 50, 38, 11, 11, 37, 11, 28,
        15, 14, 5, 7, 2, 46, 3, 12, 10,
        20, 50, 39, 17, 50, 7, 27, 6, 5,
        11, 35, 25, 50, 18, 40, 30, 35
      ],
      lineStyle: {
        type: 'dashed',
        width: 5
      }
    },
    {
      name: 'Last Year',
      type: 'line',
      data: [
        17, 48, 30, 6, 29, 27, 8, 50, 28,
        34, 38, 48, 28, 41, 24, 27, 15, 17,
        13, 50, 9, 15, 18, 41, 43, 49, 19,
        1, 22, 20, 27, 1, 18, 26, 48, 17,
        25, 38, 1, 29, 28, 1, 42, 21, 7,
        8, 6, 6, 47, 50, 6, 46, 41
      ],
      lineStyle: {
        type: 'dotted',
        width: 5
      }
    },
    {
      name: 'YTD',
      type: 'line',
      data: [
        17, 48, 30, 6, 29, 27, 8, 50, 28,
        34, 38, 48, 28, 41, 24, 27, 15, 17,
        13, 50, 9, 15, 18, 41, 43, 49, 19,
        1, 22, 20, 27, 1, 18, 26, 48, 17,
        25, 38, 1, 29, 28, 1, 42, 21, 7,
        8, 6, 6, 47, 50, 6, 46
      ],
      lineStyle: {
        type: 'solid',
        width: 5
      }
    }
  ]
};

提前致谢

【问题讨论】：

标签： echarts

【解决方案1】：

[更新 1]

我添加了一个将周数转换为相应月份的函数：

getDateOfWeek(week: number, year: number): string {
  let date = (1 + (week - 1) * 7);
  let dateOfYear = new Date(year, 0, date)
  let month = dateOfYear.toLocaleString('pt-BR', { month: 'short' });
  month = month.charAt(0).toUpperCase() + month.slice(1).replace('.', '')
  return month;
}

还添加了axisLabel：

options: {
 ...,
  axisLabel: {
    formatter: (param: number) => {
      return this.getDateOfWeek(param, 2021)
    },
  },
  ...,
}

现在我在 xaxis 上按预期获得了月份名称...只需要禁止重复名称或定义 12 个刻度的限制。

我尝试使用xaxis.splitNumber 属性，但作为docs says，它不允许用于category 轴...

我想知道是否可以将周数更改为日期对象，例如：

firstWeek = '2021-01-01'
secondWeek = '2021-01-08'

我应该将其更改为时间序列并使用 X 轴上的真实日期吗？不确定它是否会解决问题或带来另一个问题：|

这是目前的结果：

【讨论】：

【解决方案2】：

已解决添加新的 xaxis 图层并隐藏第一个...

xAxis: [
  {
    type: "category",
    boundaryGap: false,
    data: this.generateData(false, 51),
    axisLabel: {
      formatter: (param) => {
        return this.getMonthFromWeek(param, 2021);
      }
    },
    show: false
  },
  {
    position: "bottom",
    type: "category",
    data: [
      "Jan",
      "Fev",
      "Mar",
      "Abr",
      "Mai",
      "Jun",
      "Jul",
      "Ago",
      "Set",
      "Out",
      "Nov",
      "Dez"
    ],
    xAxisIndex: 2
  }
],

这里是沙盒代码result！

【讨论】：