Echarts时间轴,实现根据时间间隔让两点不连接的效果

解决一个Echarts时间轴的问题，因为在网上只找到一个相关问题但没有解决方案所以觉得还是很有价值可以分享一下的。

上个项目中需要整一个折线图，展示的是设备在不同时间的状态数据。需要做到的效果是X轴指定时间然后后端数据一来能够自动按照时间把点画出来，知道了有时间轴这个东西后按照查到的echarts的例子很快就做出来了。

不久后发现一个问题

设备每隔一段时间会发一次数据给后端，这个时间是可以指定的，比方说5分钟，但是设备可能会离线不发数据，所以两条数据可能会隔很长一段时间。

但是在现有的图中画出来的线就是一条连续的线，两个间隔很久的点仍然连在一起，这个观感很不好。所以我就去找有没有办法能让echarts一条线断开，因为这个需求就很不好描述，网上就根本没有让线断开这种说法，很长时间都没解决这件事。

后来有别的同事找到了解决办法，其实就是一个思路的问题。一开始我就是想找echarts有没有api或者属性能做到让线断开，这个是找不到了，正确的思路是不需要让线断开，多画几条线就行了。

代码效果图，重点是展示线嘛，其他的细节（表格线，图例什么的）网上别的文章都有。

关键点就是 series

如果是画多条线的话就是在 series 这个数组中有几条线放几个对象，对象里面的data放需要显示的数据。之前我做过多条线的图表但都是每条线平行，点数量一样，就以为series就是这么用的，但是技术的运用是灵活的。

最终实现

就是后端传来的数据不再是一个对象，而是要显示几条线就是几个对象，比方说springboot项目配置文件里指定隔多长时间让线断开，比方说上面是5分钟设备发一次，我们就可以设置6分钟，然后数据库查询在代码中处理把这多个对象返给前端，前端遍历，依次创建series中每一个对象。

下面是上面效果图的代码

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const stream = ref()
// 测试vue3 代替this.$refs的写法，发现变量名和ref的值一样就能取到dom节点
const eee = ref()
onMounted(()=>{
  let temperatureOption = {
        backgroundColor: "#0c2653",
        xAxis: {
          type: "time",
          max:'2022-06-30 00:00:00',
          min:'2022-06-01 00:00:00'
        },
        yAxis: {
          type: "value"
        },
        series: [{
          name: 't1',
          type: "line",
          showAllSymbol: true,
          symbol: "circle", // 折线是否是实心
          symbolSize: 1, // 折点大小
          smooth: true,
          color: "#66B0FF",
          lineStyle: {
            width: 1
          },
          data: [['2022-06-04 03:00',32],['2022-06-05 06:00',32],['2022-06-06 09:00',32]]
        },
        {
          name: 't1',
          type: "line",
          showAllSymbol: true,
          symbol: "circle", // 折线是否是实心
          symbolSize: 1, // 折点大小
          smooth: true,
          color: "#66B0FF",
          lineStyle: {
            width: 1
          },
          data: [['2022-06-14 03:00',36],['2022-06-15 06:00',36],['2022-06-16 09:00',36]]
        }]
      }
  let myChart = echarts.init(stream.value)
  myChart.setOption(temperatureOption)

  console.log(stream.value)
  console.log(eee.value)
});

</script>

<template>
  <div ref="stream" style="width: 500px;height:500px"></div>
  <div ref="eee"></div>
</template>