ECharts堆叠柱状图时间X轴异常问题排查与修正方案咨询

问题描述 #

有人能帮我检查这份ECharts图表配置项，给出修正时间X轴显示异常的方案吗？我已尝试使用时间戳、日期、时间戳除以1000等方式，均无法得到正确效果。

原始代码 #

let sales = [
    0,84,5,3,2,1,0,0,3,6
]

let listings = [
    1,297,23,5,8,6,9,3,6,19
]

let ps = [
    1663084060653,
    1663089644329,
    1663095228005,
    1663100811680,
    1663106395356,
    1663111979032,
    1663117562708,
    1663123146384,
    1663128730059,
    1663134313735
]

let color = "red"

option = {
    textStyle: {
      color
    },
    legend: {
      textStyle: {
        color
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'time',
        data: ps,
        // axisLabel: {
        //   formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
        // }
      }
    ],
    yAxis: [
      {
        // type: 'value'
      }
    ],
    series: [
      {
        name: 'Sales',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: sales
      },
      {
        name: "Listings",
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: listings
      }
    ]
}

修正方案 #

问题核心是时间轴数据与系列数据的匹配逻辑，以及ECharts对时间刻度的自动计算规则。以下是具体修复步骤：

1. 统一数据绑定格式：将系列数据转换为[时间戳, 数值]的数组结构，确保每个数据点和X轴时间一一对应，彻底解决错位问题：

   const salesData = ps.map((ts, idx) => [ts, sales[idx]]);
   const listingsData = ps.map((ts, idx) => [ts, listings[idx]]);
   

2. 优化X轴配置：明确自定义时间显示格式，同时强制刻度与数据点对齐，避免自动生成的冗余刻度：

   xAxis: [
     {
       type: 'time',
       axisLabel: {
         formatter: (value) => {
           const date = new Date(value);
           // 按需求调整格式，这里显示时分
           return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
         }
       },
       boundaryGap: false,
       axisTick: { alignWithLabel: true }
     }
   ]
   

3. 补全Y轴配置：显式声明Y轴类型为value，避免默认逻辑引发的异常：

   yAxis: [{ type: 'value' }]
   

修正后完整代码 #

let sales = [0,84,5,3,2,1,0,0,3,6];
let listings = [1,297,23,5,8,6,9,3,6,19];
let ps = [
    1663084060653,
    1663089644329,
    1663095228005,
    1663100811680,
    1663106395356,
    1663111979032,
    1663117562708,
    1663123146384,
    1663128730059,
    1663134313735
];
let color = "red";

// 转换数据格式
const salesData = ps.map((ts, idx) => [ts, sales[idx]]);
const listingsData = ps.map((ts, idx) => [ts, listings[idx]]);

option = {
    textStyle: { color },
    legend: { textStyle: { color } },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'time',
            axisLabel: {
                formatter: (value) => {
                    const date = new Date(value);
                    return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
                }
            },
            boundaryGap: false,
            axisTick: { alignWithLabel: true }
        }
    ],
    yAxis: [{ type: 'value' }],
    series: [
        {
            name: 'Sales',
            type: 'bar',
            stack: 'Ad',
            emphasis: { focus: 'series' },
            data: salesData
        },
        {
            name: "Listings",
            type: 'bar',
            stack: 'Ad',
            emphasis: { focus: 'series' },
            data: listingsData
        }
    ]
};

关键说明 #

• 数据格式转换后，柱状图位置会精准匹配X轴时间点，解决了时间轴显示错位、刻度异常的核心问题
• 自定义axisLabel.formatter可灵活调整时间显示样式，比如显示完整日期+时间、仅时分秒等
• boundaryGap: false让X轴刻度与数据点完全对齐，消除两侧留白带来的视觉偏差

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