網(wǎng)站用微信登錄 要怎么做東莞網(wǎng)站優(yōu)化關鍵詞排名
功能要求
? ? ? ? 1、折線圖,展示每天對應的一個時間片段
? ? ? ? 2、echarts Y軸展示時間片段,如:['00:00','03:00','05:15']
? ? ? ? 3、X軸展示日期,如:['xx年xx月xx日']
后端返回的數(shù)據(jù)結構,如
[{xAdate:"2024-06-15",data:"16:00",adata:"",},{xAdate:"2024-06-16",data:"05:00",adata:"",},{xAdate:"2024-06-17",data:"12:00",adata:"",},
]
效果圖
代碼構思
- ?通過后端返回的數(shù)據(jù),無法實現(xiàn)該功能
- ?通過后端返回的時間片段,來做Y軸的展示,組合成一個新數(shù)組,同時要考慮數(shù)據(jù)的“去重”和“排序”
- ?要記錄下來,后端的返回的時間片段,對應的Y軸新組合數(shù)組的索引,記錄在對應天數(shù)中
注意事項 -- Y軸時間片段后端返回的是否[‘00:00’]
? ? ? ? 沒有的時候 索引要+1
Y軸如何展示時間片段
? ? 1、第一種通過 type類型設置time 來展示
? ? ? ?2、 第二種通過?formatter 方法來展示
? ? ??
? ? ? ?3、注意事項
????????Y軸要設置為整數(shù) "minInterval:1"
? ???????
? ? ?數(shù)據(jù)處理 ---- (重點)
// 將時間字符串轉換為分鐘數(shù)進行比較
converData(timeStr) {const parts = timeStr.split(':').map(Number);return parts[0] * 60 + parts[1];
}// 對時間數(shù)組去重并排序
sortTime(times) {const uniqueTimes = [...new Set(times)]; // 去重uniqueTimes.sort((a, b) => converData(a) - converData(b)); // 排序return uniqueTimes;
}
? 數(shù)據(jù)處理和賦值代碼
let timeArr =[];let xAxi =[];let dataSer = []; // 后端數(shù)據(jù)賦值let seri =[];let xAxSeri =[];// series -- 數(shù)據(jù)渲染dataSeri = '后端數(shù)據(jù)'dataSeri.forEach((item)=>timeArr.push(item.xxx); // 時間片段xAxi.push(item.xxx);// 日期});seri = this.sortTime(timeArr);if(seri.includes("00:00")){for(let i=0;i< seri.length; i++){for(let j=0;j< dataseri.length; j++){// xxx -- 時間片段if(dataseri[j].xxx == seri[i]){// a 后端定義好一個屬性存放索引dataSeri[j].a = i+1;}}}}else {for(let i=0;i< seri.length; i++){for(let j=0;j< dataseri.length; j++){// xxx -- 時間片段if(dataseri[j].xxx == seri[i]){// a 后端定義好一個屬性存放索引dataSeri[j].a = i+1;}}}}dataseri.forEach((item) =>{xAxSeri.push(item.a);});});this.$nextTick(()=>{this.yAxData= seri.includes("00:00")? seri:["00:00",...seri];this.xAxData = xAxi;this.seriesData= xAxSeri;this.init();});
echarts 整體代碼
? ? ? ? ? 注意 getYaxis 方法
let option = {tooltip:{trigger:"axis"backgroundcolor:"rgba(0,22,46,.8)",,//設置背景顏色textstyle:{color:"#9ba6b4",fontsize: 14,},formatter:(item)=> {return `<span>日期:</span><span style='color:#e9f3ff'>${item[0].name}</span><br/><span>發(fā)生時間</span><span style='color:#e9f3ff'>${this.yAxData[item[0].value]}</span>`},},grid:{top:"20%",left:"5%",right:"8%",bottom:"6%",containLabel: true,},XAxis:[{type:"category",boundaryGap: false,axisLine:{show: true,linestyle:{color:"#26367A",},},splitArea:{show: false,},axisLabel:{textstyle:{color:"#fff",fontsize: 14,},},axisTick:{show: false,},splitLine:{show: false,},data: this.xAxData,},],yAxis:[{name:"時段",nameTextstyle: {color:"#fff",},type:"value',axisLine:{show: false,},axisLabel:{textstyle:{color:"#fff",fontsize:"14",},formatter:function(value,index){return this .getYaxis(value,index)},},minInterval:1,splitLine:{show: true,linestyle:{type: "dashed",color:"#6fc2f1",},},}],series :[{type: "line",data: this.seriesData,symbolsize:10,symbol:"circle",smooth: true,showSymbol: false,linestyle:{width: 2,color:"#O0ffOc",},itemstyle:{normal:{color:"#00ff0c”,linestyle:{color:"#00ff0c”,// 線的顏色},},},}],}getYaxis(value,index){const arr = this.yAxDataif(index< arr.length){return arr[index]}}
??????