功能要求

? ? ? ? 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]}}

??????