echarts 时间-状态图

var categories = ['设备名称'];
const formatterDate = (tt) => {
  const date = new Date(tt);
  const Y = date.getFullYear().toString();
  const M = (date.getMonth() + 1).toString();
  const D = date.getDate().toString();
  const H = date.getHours().toString();
  const m = date.getMinutes().toString();
  const s = date.getSeconds().toString();
  return Y + '-' + M + '-' + D + ' ' + H + ':' + m + ':' + s;
};
const data = [
  {
    name: '离线',
    value: [0, 1708658345646, 1708658350821, 5175],
    itemStyle: {
      normal: {
        color: '#b69868'
      }
    }
  },
  {
    name: '在线',
    value: [0, 1708658350821, 1708658354390, 1939],
    itemStyle: {
      normal: {
        color: '#44bb86'
      }
    }
  },
  {
    name: '离线',
    value: [0, 1708658354390, 1708658358094, 1939],
    itemStyle: {
      normal: {
        color: '#b69868'
      }
    }
  }
];
function renderItem(params, api) {
  var categoryIndex = api.value(0);
  var start = api.coord([api.value(1), categoryIndex]);
  var end = api.coord([api.value(2), categoryIndex]);
  var height = api.size([0, 1])[1] * 0.6;
  var rectShape = echarts.graphic.clipRectByRect(
    {
      x: start[0],
      y: start[1] - height / 2,
      width: end[0] - start[0],
      height: height
    },
    {
      x: params.coordSys.x,
      y: params.coordSys.y,
      width: params.coordSys.width,
      height: params.coordSys.height
    }
  );
  return (
    rectShape && {
      type: 'rect',
      transition: ['shape'],
      shape: rectShape,
      style: api.style()
    }
  );
}
option = {
  tooltip: {
    formatter: function (params) {
      return (
        params.marker +
        params.name +
        ': ' +
        formatterDate(params.value[1]) +
        '至' +
        formatterDate(params.value[2])
      );
    }
  },

  dataZoom: [
    {
      type: 'slider',
      filterMode: 'weakFilter',
      showDataShadow: false,
      top: 400,
      labelFormatter: ''
    },
    {
      type: 'inside',
      filterMode: 'weakFilter'
    }
  ],
  grid: {
    height: 300
  },
  xAxis: {
    min: data[0].value[1],
    scale: true,
    axisLabel: {
      formatter: function (val) {
        return formatterDate(val);
      }
    }
  },
  yAxis: {
    data: categories
  },
  series: [
    {
      type: 'custom',
      renderItem: renderItem,
      itemStyle: {
        opacity: 0.8
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data
    }
  ]
};