Echarts?x軸為time的用法代碼示例
更新時間：2023年11月11日 09:07:09 作者：GarsonW
平時項目里數(shù)據(jù)可視化展示用的大多是echarts或者highcharts,下面這篇文章主要給大家介紹了關于Echarts?x軸為time用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
'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)獲取：
顯而易見的我們需要：
（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ù)，可以進行設置了。
效果圖：
總結(jié)
到此這篇關于Echarts x軸為time用法的文章就介紹到這了,更多相關Echarts x軸為time用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結(jié)
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 "，主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容，對于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學可以參考一下。2016-12-12
今天小編就為大家分享一篇select2 ajax 設置默認值,初始值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了前端常見算法的JS實現(xiàn)，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的心情記事本，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下2023-01-01
localstorage實現(xiàn)帶過期時間的緩存功能
這篇文章主要介紹了localstorage實現(xiàn)帶過期時間的緩存功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
xml分頁+ajax請求數(shù)據(jù)源+dom取結(jié)果實例代碼
最近做的一個項目里的某個小功能,主要是為了方便選擇數(shù)據(jù) 演示地址:由于有惡意程序，所以去掉地址2008-10-10
淺析javascript異步執(zhí)行函數(shù)導致的變量變化問題解決思路
下面小編就為大家?guī)硪黄獪\析javascript異步執(zhí)行函數(shù)導致的變量變化問題解決思路。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
這篇文章主要介紹了使用原生js實現(xiàn)拖拽和粘貼上傳圖片功能,Vue/Rect?生態(tài)用多了都快忘記原生js怎么寫了,今天需要直接在服務器裸寫個頁面,實現(xiàn)?textarea?文本框里接收拖拽多個圖片,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了如何基于JS實現(xiàn)一個發(fā)送驗證碼的計時器效果,文中的示例代碼講解詳細,感興趣的小伙伴快跟隨小編一起學習一下吧2023-11-11
這篇文章主要介紹了webstorm中配置Eslint的兩種方式及差異比較詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10