'time' x軸的格式：

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

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

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

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

具體實(shí)現(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'
    }
  ]
};

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

顯而易見的我們需要：

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

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

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

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

進(jìn)而通過打擂臺(tái)比較算法，得出最大(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ù)，可以進(jìn)行設(shè)置了。

效果圖：

總結(jié) 

到此這篇關(guān)于Echarts x軸為time用法的文章就介紹到這了,更多相關(guān)Echarts x軸為time用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論