echarts 中如何定制dataZoom显示的起始值和结束值

Question

echarts 中如何定制dataZoom显示的起始值和结束值，而不是现在的从X轴数据中取；X轴展示时间十和分；dataZoom中展示月日 十和分

Answer 1

在ECharts中，可以通过设置dataZoom组件的startValue和endValue属性，来手动设置dataZoom的起始值和结束值。

option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: function (value) {
        // 格式化时间，展示月日时分
        return echarts.format.formatTime('MM-dd hh:mm', value);
      }
    }
  },
  dataZoom: {
    type: 'slider',
    startValue: new Date('2023-03-01 10:00').getTime(),
    endValue: new Date('2023-03-01 10:30').getTime(),
    handleLabel: {
      formatter: function (value) {
        // 格式化时间，展示月日时分
        return echarts.format.formatTime('MM-dd hh:mm', value);
      }
    }
  },
  // 其他配置项...
  series: [
    // 数据系列...
  ]
};

在上面的示例中，我们在 dataZoom 中设置了 startValue 和 endValue，分别表示 dataZoom 显示的起始值和结束值，而不是从 X 轴数据中取。另外，在 axisLabel 和 handleLabel 中都设置了时间的格式化方式，以展示月日时分的形式。

需要注意的是，startValue 和 endValue 的值需要是一个时间戳，而不是一个字符串，所以我们需要使用 new Date() 来将字符串转化为时间戳。