Echarts?x軸為time的用法代碼示例

更新時間：2023年11月11日 09:07:09 作者：GarsonW

平時項目里數(shù)據(jù)可視化展示用的大多是echarts或者highcharts,下面這篇文章主要給大家介紹了關(guān)于Echarts?x軸為time用法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

'time' x軸的格式：

x軸設置type為time(不需要轉(zhuǎn)換X軸顯示的文字) 正常情況下還應該定義一個x軸的起始范圍，數(shù)據(jù)格式如：

max: "2021-01-04 08:24:38" ， min: "2021-01-04 08:14:36"

然后series中的 data也應該設置為二維數(shù)組類型如：

[ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56] ]

具體實現(xiàn)代碼：

option = {
  xAxis: {
    type: 'time',
    min: "2021-01-04 08:14:36",
    max: "2021-01-04 08:24:38",
  },
  yAxis: {
    type: 'value',
},
  series: [
    {
      data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 08:14:46", 56],["2021-01-04 08:20:46", 23],["2021-01-04 08:22:46", 40] ],
      type: 'line'
    }
  ]
};

動態(tài)獲?。?/h2>

顯而易見的我們需要：

（1）max，min的時間（2）時間和數(shù)據(jù)的二維數(shù)組。

我們可以先通過for循環(huán)遍歷數(shù)據(jù)得到:

（1）所有的日期（2）series的二維數(shù)組：[時間戳，數(shù)據(jù)值]

      for (let i = 0; i < TotalData.length; i++) {
        dateData[i] = TotalData[i].date;//獲取時間
        seriesData[i] = [TotalData[i].date,TotalData[i].value];//獲取數(shù)據(jù)的二維數(shù)組
      }

進而通過打擂臺比較算法，得出最大(max)和最小(min)的日期：

      //選出最大和最小日期
      var maxDateStr = '0001/01/01';
      var minDateStr = '9999/12/31';
      var maxDate = new Date(maxDateStr);
      var minDate = new Date(minDateStr);
      for (let i = 0; i < dateData.length; i++) {
          dateData[i] = dateData[i].replace(/-/g,"/")
          var tempDate = new Date(dateData[i])
          console.log(tempDate)
          if(tempDate>maxDate) maxDate = tempDate;
          if(tempDate<minDate) minDate = tempDate;
      }

這樣我們就獲得了我們需要的數(shù)據(jù)，可以進行設置了。

效果圖：