echarts.js 时间轴上最小/最大标签的不同格式？

Question

我正在构建一个 Echart (5.5.1) 的图表，其时间类型为

xAxis

，虽然我喜欢它根据范围跨度调整标签，但有时当您缩放时，例如它可能会难以理解您实际查看的时间段。

因此我添加了最大和最小标签，这样我就可以有一些可见的地标，如下所示：

xAxis: {
  type: 'time',
  data: [],
  axisLabel: {
    showMinLabel: true,
    showMaxLabel: true,
    rotate: 45
  }
},

但是当我真正想要相反的东西时，最小值和最大值的标签在某种程度上比其他标签更精确。当我想要更多类似日期和月份的内容时，它会显示小时和时间。

然后我尝试专门格式化最小和最大标签

xAxis: {
  type: 'time',
  data: [],
  axisLabel: {
    showMinLabel: true,
    showMaxLabel: true,
    rotate: 45
  },
  min: function (value) {
    formatEdgeLabel(value.min)
  },
  max: function (value) {
    formatEdgeLabel(value.max)
  }
},

函数

formatEdgeLabel()

返回一个格式为

23/10

的日期字符串，就是这样。但不知何故，echarts 似乎并不关心，仍然显示小时时间，如上面的屏幕截图所示。

有人知道该问题的解决方案或解决方法吗？

Answer 1

您没有正确使用最小/最大。这些用于设置轴上的最小和最大边界。您正在寻找的是标签格式化程序。

示例：

// format string
axisLabel: {
  formatter: '{d}/{M}/{yyyy}'
}


// function
axisLabel: {
  formatter: function (value, index) {
    const date = new Date(value);
    if (date.getHours() === 0) {
      return '{d}/{M}/{yyyy}'
    }
    ...
    return 'anything you want';
  }
}

---

编辑：

echarts 不支持仅覆盖最小值和最大值的格式化程序行为，并且会带来一些困难。

1. 很难确定格式化函数内的最大值。
2. 如果格式化程序用于任何值，则所有格式化都必须手动完成（不可能从内部调用echarts默认格式化程序）

为了解决第一个问题，我想出了一个杂乱的解决方案：

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
  let now = new Date((base += oneDay));
  data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

option = {
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      formatter: function (value, index) {
        if (index === 0) return 'min label';
        if (value === endValue) return 'max label'
        return 'other label'
      },
      showMinLabel: true,
      showMaxLabel: true
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
    },
    {
      realtime: false
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      data: data
    }
  ]
};


const minX = data[0][0];
const maxX = data[data.length-1][0];
const interval = maxX - minX;
let endValue = maxX;
myChart.on('dataZoom', function (params) {
  if (params.from === undefined && params.batch === undefined) return;
  
  const end = params.end ? params.end : params.batch[0].end;
  endValue = Math.round(interval * end * 0.01 + minX);
  myChart.dispatchAction({
    type: 'dataZoom',
    start: params.start,
    end: params.end
  });
});

最小值可以由索引 0 确定。为了确定最大值，我正在监听 dataZoom 事件 并计算预期的最大值。由于该事件仅在轴标签更新后才会触发，因此我再次触发该事件。现在计算出的最大值可用于更新标签。

用于手动格式化其他标签。 echarts 的默认格式化策略在‘级联模板’下的formatter文档中提到。