echarts 散点图x和y轴均为时间轴

废话不多说，直接上代码

const fillStr = (val) => (`${val}`.length < 2 ? `0${val}` : val);

const hours = new Array(24 * 60   1)
  .fill(0)
  .map(
    (_, index) =>
      `${fillStr(parseInt(index / 60))}:${fillStr(parseInt(index % 60))}`
  );

const data = [
  ['2022-04-18 06:42:35', 5],
  ['2022-04-19 08:35:46', 5],
  ['2022-04-20 12:45:12', 5],
  ['2022-04-21 14:00:05', 5],
  ['2022-04-22 18:45:54', 5],
  ['2022-04-23 23:45:12', 5],
  ['2022-04-24 23:49:10', 5]
].map(function (item) {
  const date = new Date(item[0]);
  const h = date.getHours();
  const m = date.getMinutes();
  console.log('AAAA', h * 60   m);

  return [item[0], h * 60   m, item[1]];
});

option = {
  title: {
    text: 'Punch Card of Github'
  },
  legend: {
    data: ['Punch Card'],
    left: 'right'
  },
  tooltip: {
    position: 'top',
    formatter: function (params) {
      return params.value[2]   ' commits in '   params.value[0];
    }
  },
  grid: {
    left: 20,
    bottom: 20,
    right: 20,
    containLabel: true
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: '{yyyy}-{MM}-{dd}'
    }
  },
  yAxis: {
    data: hours,
    axisLabel: {
      showMaxLabel: true,
      interval: 359
    }
  },
  series: [
    {
      name: 'Punch Card',
      type: 'scatter',
      symbolSize: function (val) {
        return val[2] * 2;
      },
      data: data,
      animationDelay: function (idx) {
        return idx * 5;
      }
    }
  ]
};

这篇好文章是转载于：学新通技术网