Echarts横坐标时间轴，并缩放数据_echarts 时间轴-CSDN博客

本文链接：https://blog.csdn.net/qq_35073135/article/details/137586458

本文详细描述了一个项目如何使用Echarts5.5.0实现时间轴折线图，包括处理数据缺失、数据缩放控制、断开曲线规则以及解决语言显示问题。重点介绍了如何配置dataZoom和xAxis以适应不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文中Echarts的版本为5.5.0

首先说一下我们的项目背景，就是需要一个横坐标为时间轴的折线型数据。折线分为数值类型和枚举类型，也就是说Y坐标为数值型或者枚举型的数据；然后数据的缩放是这样的，把请求到的数据，一次性的全部显示在折线中，并且需要支持鼠标滚轮和鼠标拖拽式，缩放查看局部的数据。效果如图所示：

项目中的难点主要是三部分。1、查询的到的数据，比如查询的是今天的数据，但是今天的话，只有在10点和11点有数据，其他的时间没有数据；2、横坐标下面的显示的当前缩放完成之后的时间范围；3、需要线断开连接，具体的规则是，当数据中有flage:start的时候，就认为这是一个新的曲线了，需要和前面的数据断开显示；

1、正确显示数据

配置dataZoom

针对于第一个问题，采用的是dataZoom中配置，startValue和endValue，而不是配置start和end；

    dataZoom: [
      {
        type: "inside",
        // start: 50, // 不能使用百分比，因为搜索的时间和数据的时间不一定能对应上
        // end: 100,
        startValue: zoomStartValue,
        endValue: zoomEndValue,
        filterMode: "filter",
      },
    ],

其中zoomStartValue和zoomEndValue就是第一条数据和最后一条数据的时间；例如刚刚说的上面的例子。搜索今天的全部数据，但是只有10点和11点之间是有数据。那么zoomStartvalue="2024-04-10 10:00:00"，则zoomEndValue可能就是"2024-04-10 11:30:00"。这里不需要使用时间戳，直接使用字符串类型的时间就可以；但是因为搜索的是今天&