Echarts横坐标时间轴，并缩放数据

本文中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"。这里不需要使用时间戳，直接使用字符串类型的时间就可以；但是因为搜索的是今天，所以在用户拖动的时候，应该是能拖动到今天的0点的。结束时间应该是查询的时候的时间。所以这个时候的x轴需要单独的配置；

配置xAxis

        在xAxis中，需要配置min和max两个参数，用于让x轴能滑动到今天的0点的时刻，虽然那个时间点并没有数据；

    xAxis: {
      type: "time", // 这里需要明确为“time”
      min: searchBeginTime,
      max: searchEndTime,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#C0C0C0",
        }
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        color: "#676767"
      },
      data: xdata, //  这里比较关键，需要传个数据，要不然直接靠server得到的数据，缩放有问题
    },

        其中的min和max对应的数据，就是搜索传给后台的数据。比如我搜索的今天的数据，那么searchBeginTime应该是"2024-04-10 00:00:00"，searchEndTime应该是当前的搜索的结束时间："2024-4-10 11:49:02"；

        其中还有一个问题是我在实际开发中发现的。就是xAxis中的data数据也是需要传递的。要不然直接靠server中的横坐标的数据，下面缩放以后获取到的时间就有问题了。xdata的数据，就是后台给的数据中，所有数据的时间的数组：['2024-04-10 10:00:00','2024-04-10 10:15:00',2024-04-10 10:30:00,'2024-04-10 10:45:00',……'2024-04-10 11:30:00']

2、缩放显示当前的时间区间

监听dataZoom事件

        使用on("dataZoom")的方法，来监听Echats进行了缩放，而且这里面会有对应的，当前缩放的横坐标开始的百分比，和结束的百分比；

        具体的方法如下：

  myChart.off("dataZoom");
  myChart.on("dataZoom", (params) => {
    var optionData = myChart.getOption();
    var min = optionData.xAxis[0].min;
    var max = optionData.xAxis[0].max;
    var minT = new Date(min).getTime();
    var maxT = new Date(max).getTime();
    var len = maxT - minT;// 计算出时间的差额。使用的是时间戳计算~
    var start = params.batch[0].start; // 横坐标左侧的百分比
    var end = params.batch[0].end; // 横坐标右侧的百分比
    var startIndex = Math.round((len * start) / 100);
    var endIndex = Math.round((len * end) / 100);
    var xTextContent = `${moment(minT + startIndex).format("YYYY-MM-DD HH:mm:ss")} -- ${moment(minT + endIndex).format("YYYY-MM-DD HH:mm:ss")}`; // 使用moment插件，格式化成具体的时间
    xText.value = xTextContent;
  });

其中，start和end就是Echats缩放之后，获取的开始百分比和结束百分比；start的最小值为0，end的最大值为100。然后根据横坐标的min和max获取到整体的时间戳。然后计算出来差额，再根据百分比就能获取到当前的横坐标显示的时间了。

3、断开曲线

        项目中需要把数据中，含有flags:true的，就认为是一个新的曲线。当时我们想到的断开方法是给一个数据，只传时间，然后对应的值传空，这样就能断开了。但是由于我们的数据横坐标对应都是有值的。上面的方法就不可用了。所以我们采用的了第二种方法，就是在Echats中绘制了两条曲线，这两条曲线互不干扰。

        首先说一下，我们的数据：

var chartRowData = [{
  timestamp: "2024-4-10 11:20:00",
  value: 12,
  status: "null",
  flags: true,
},{
  timestamp: "2024-4-10 11:21:00",
  value: 19,
  status: "ok",
},{
  timestamp: "2024-4-10 11:22:00",
  value: 20,
  status: "alarm",
},{
  timestamp: "2024-4-10 11:23:00",
  value: 22,
  status: "ok",
},{
  timestamp: "2024-4-10 11:24:00",
  value: 8,
  status: "ok",
  flags: true,
},{
  timestamp: "2024-4-10 11:25:00",
  value: 15,
  status: "ok",
},{
  timestamp: "2024-4-10 11:26:00",
  value: 12,
  status: "ok",
},{
  timestamp: "2024-4-10 11:27:00",
  value: 14,
  status: "ok",
}]

        所以我采用下面的方法整理数据

var xdata = [], seriesData = [], seriesArr=[]; // 横坐标；一段横线的小数组；全部数据的数组
  var chartRowDataLength = chartRowData.length;
  chartRowData.forEach((item, i) => {
    xdata.push(item.timestamp);
    // 如果是flags的值为start的话，就重新添加一条线
    if(item.hasOwnProperty("flags") && item.flags == "start" && seriesData.length) {
      seriesArr.push({
        name: historyName,
        data: seriesData.slice(0),
        type: "line",
        smooth: true,
        showSymbol: false,
        emphasis: { // 关闭鼠标高亮
          disabled: true
        }
      })
      seriesData.splice(0);
    }
    seriesData.push([item.timestamp, item.value, item.status]);
    if (i == 0) {
      zoomStartValue = item.timestamp;
    }
    if (i == chartRowDataLength - 1) {
      zoomEndValue = item.timestamp;
      // 数据最后一条，也要添加到大数组中。
      seriesArr.push({
        name: historyName,
        data: seriesData.slice(0),
        type: "line",
        smooth: true,
        showSymbol: false,
        emphasis: { // 关闭鼠标高亮
          disabled: true
        }
      })
    }
  })

4、其他的小问题

设置语言

        做完了发现时间显示的有问题。就是不是按照咱们写的年月日时分秒显示的。所以需要在初始化Echats的时候，指定一下语言；

var chartDom = document.getElementById("chartDom");
myChart = echarts.init(chartDom, null, { locale: "ZH" });

一天中仅有一条数据

        测试提出，如果查询今天只有一条数据的话，就会发现，缩放有问题；经过查询代码发现，是因为zoomStartValue和zoomEndValue相等，导致了出现了横坐标显示的不是今天的数据。所以有了以下的一个判断：

    // 如果之有一个数据的话，zoomStartValue和zoomEndValue的值是一样的。这样Echarts的zoom就有问题了~
    // 所以需要单独处理一下
    if(chartRowData.length == 1) { 
      zoomStartValue = searchBeginTime;
      zoomEndValue = searchEndTime;
    }

        如有需要，可以查看资源。里面的代码可以直接运行，因为没有请求，所以里面很多内容都是直接写死的。