如何调整ECharts图表单日期区间，实现等间距数据点并支持缩放

当前使用ECharts生成的图表中，单个日期占用了过多区间范围，希望将其缩小，使每个数据点的日期区间保持相等。同时要求缩放图表时，能显示所有被压缩的数据点。

当前图表：
预期图表：

现有代码 #

const makeChart = () => {
  const chart = echarts.init(chartRef.current);
  const options = {
    xAxis: {
      type: "category",
      data: timestamp,
      name: "TimeStamp",
      nameLocation: "middle",
      nameTextStyle: {
        align: "center",
        verticalAlign: "top",
        lineHeight: 40,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "a1",
        min: 0,
        max: 1,
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        type: "value",
        name: "a2",
        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    calculable: true,
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      left: 0,
    },
    tooltip: {
      trigger: "axis",
    },

    grid: {
      right: 30,
      left: 50,
    },
    series: [
      {
        name: "a1",
        type: "line",
        data: a1Values,
      },
      {
        name: "a2",
        type: "line",
        yAxisIndex: 1,
        data: a2Values,
      },
    ],
    dataZoom: [
      {
        show: true,
        xAxisIndex: 0,
        height: 15,
        start: 20,
        end: 100,
        height: 14,
        bottom: 8,
      },
      {
        type: "inside",
        start: 20,
        end: 100,
      },
      {
        show: true,
        yAxisIndex: 0,
        filterMode: "empty",
        width: 15,
        height: "80%",
        showDataShadow: false,
        right: "0%",
      },
    ],
  };

  chart.setOption(options);

  return () => {
    chart.dispose();
  };
};

useEffect(() => {
  makeChart();
}, []);

要实现每个数据点日期区间相等且缩放时显示所有数据，需修改以下配置：

1. 将X轴类型改为时间轴 #

当前X轴使用category类型，会把每个日期当作独立分类强制均分宽度，忽略日期实际时间间隔。改为time类型后，ECharts会根据日期的真实时间间隔自动分配空间，保证数据点按时间比例排列：

xAxis: {
  type: "time", // 替换原category类型
  name: "TimeStamp",
  nameLocation: "middle",
  nameTextStyle: {
    align: "center",
    verticalAlign: "top",
    lineHeight: 40,
  },
  // 可选：自定义日期显示格式
  axisLabel: {
    formatter: (value) => echarts.format.formatTime('yyyy-MM-dd HH:mm', value)
  }
}

2. 调整数据格式 #

使用time类型轴时，需确保时间数据是ECharts可识别的格式（毫秒级时间戳、ISO标准时间字符串），同时把系列数据改为[时间值, 数据值]的数组格式：

// 先转换时间格式（假设原timestamp是字符串）
const formattedTimestamps = timestamp.map(dateStr => new Date(dateStr).getTime());

// 更新series数据
series: [
  {
    name: "a1",
    type: "line",
    data: formattedTimestamps.map((time, idx) => [time, a1Values[idx]]),
  },
  {
    name: "a2",
    type: "line",
    yAxisIndex: 1,
    data: formattedTimestamps.map((time, idx) => [time, a2Values[idx]]),
  },
]

3. 优化DataZoom配置 #

针对时间轴调整缩放参数，确保缩放时正确显示所有数据点：

dataZoom: [
  {
    show: true,
    xAxisIndex: 0,
    height: 14,
    bottom: 8,
    start: 0, // 初始显示全部数据
    end: 100,
    filterMode: 'filter' // 缩放时过滤视图外数据，避免丢失点
  },
  {
    type: "inside",
    start: 0,
    end: 100,
    filterMode: 'filter'
  },
  // 若不需要Y轴缩放，可移除下方配置
  // {
  //   show: true,
  //   yAxisIndex: 0,
  //   filterMode: "empty",
  //   width: 15,
  //   height: "80%",
  //   showDataShadow: false,
  //   right: "0%",
  // },
]

核心逻辑说明 #

• time类型轴会依据真实时间间隔分配空间，解决单个日期占比过大的问题
• 数据格式转换是关键，必须保证时间数据能被ECharts正确解析
• filterMode: 'filter'确保缩放时仅过滤当前视图外的数据，不会隐藏数据点

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