如何实现ECharts动态横向日历及对应系列图表？

需求说明 #

需要实现ECharts官网的横向日历热力图，核心要求是calendar配置数组和series系列数组根据Java服务端返回的JSON数据动态生成，两者长度与后端返回数据完全匹配。

完整Demo代码 #

// 模拟Java服务端返回的JSON数据，实际项目中替换为接口请求结果
const serverData = [
  { year: '2017', data: generateHeatData('2017') },
  { year: '2016', data: generateHeatData('2016') },
  { year: '2015', data: generateHeatData('2015') }
];

// 生成模拟热力数据（和官网示例逻辑一致，实际项目中由后端返回）
function generateHeatData(year) {
  const date = +echarts.number.parseDate(year + '-01-01');
  const end = +echarts.number.parseDate((+year + 1) + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.format.formatTime('yyyy-MM-dd', time),
      Math.floor(Math.random() * 100)
    ]);
  }
  return data;
}

// 动态生成calendar配置数组
const calendarConfig = serverData.map((item, index) => {
  const baseConfig = {
    range: item.year,
    cellSize: ['auto', 20]
  };
  // 除第一个日历外，设置top值避免重叠，可根据实际需求调整间距
  if (index > 0) {
    baseConfig.top = 210 * index; // 210为每个日历区块的预估高度，可按需调整
  }
  // 最后一个日历可添加right偏移（可选）
  if (index === serverData.length - 1) {
    baseConfig.right = 5;
  }
  return baseConfig;
});

// 动态生成series系列数组
const seriesConfig = serverData.map((item, index) => {
  return {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    calendarIndex: index,
    data: item.data
  };
});

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('main'));
const option = {
  title: {
    top: 30,
    left: 'center',
    text: '动态生成多年份横向日历热力图'
  },
  tooltip: {
    position: 'top'
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    top: 65
  },
  calendar: calendarConfig,
  series: seriesConfig
};

myChart.setOption(option);

关键逻辑说明 #

• 数据映射：通过Array.map()方法遍历后端返回的serverData，分别生成calendarConfig和seriesConfig，确保两者长度与后端数据一致。
• 布局适配：为非第一个日历项设置top属性，避免多个日历区块重叠，间距可根据实际展示需求调整。
• 数据关联：每个series的calendarIndex对应calendar数组的索引，确保热力数据与对应年份的日历绑定。

注意事项 #

1. 实际项目中，serverData需替换为接口请求的返回结果，后端需返回包含年份和对应热力数据的结构化JSON。
2. 日历区块的top值可根据实际页面布局、字体大小等调整，保证排版美观。
3. 若后端返回的热力数据格式与示例不同，需提前做格式转换，确保符合ECharts热力图的数据要求（[日期字符串, 数值]）。

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