关于echarts显示不同时间段的数据options应该怎么定义？

最新推荐文章于 2024-05-31 18:04:07 发布

原创最新推荐文章于 2024-05-31 18:04:07 发布 · 949 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

效果展示

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2022-11-01 08:00:00','2022-11-01 08:30:00','2022-11-01 09:00:00','2022-11-01 09:30:00','2022-11-01 10:00:00','2022-11-01 10:30:00','2022-11-01 11:00:00','2022-11-01 11:30:00','2022-11-01 12:00:00','2022-11-01 12:30:00','2022-11-01 13:00:00','2022-11-01 13:30:00', '2022-11-01 14:00:00', '2022-11-01 14:30:00']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [['2022-11-01 08:00:00',120], ['2022-11-01 09:00:00',132], ['2022-11-01 10:00:00',101], ['2022-11-01 11:00:00',134], ['2022-11-01 12:00:00',90], ['2022-11-01 13:00:00',230], ['2022-11-01 14:00:00',210]]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [['2022-11-01 08:30:00',820], ['2022-11-01 09:30:00',932], ['2022-11-01 10:30:00',901], ['2022-11-01 11:30:00',934], ['2022-11-01 12:30:00',1290], ['2022-11-01 13:30:00',1330], ['2022-11-01 14:30:00',1320]]
    }
  ]
};

故事：业务需求是将设备在不同时间点上传到平台的数据进行展示，同事搞了一天y轴的数据都是错乱的，但是x轴的时间线总对不上。离下班还有十几分钟同事突然顿悟从此打开了“新世界的大门”，在xAxis.data将series.data中所有用到的时间放到这个数组里面echarts就自动对齐时间轴了。当时xAxis.data的数据我们已经从后台通过sql语句的ordery by已经将时间做好了但一直没有使用，结果歪打正着用上了。哈哈哈，下班！经验值+1