例如返回数据
例如x轴的数据是每小时的 但是第一条数据的小时数是08 第二条是10 下方代码解决这个问题
//x轴条数区间
const startTime = ref(8)
const endTime = ref(23)
const orderHourNumStats = () => {
proxy.$http('orderHourNumStats', {time: dataTimeTitle.value}, proxy).then(res => {
// 订单图表初始化数据
let data = {
categories: [],
series: [],
};
// 01、遍历x轴时间从08-23 并给每个数据列表添加默认值0
res.data.dateList?.forEach((item, index) => {
let day = {
name: item + ' ',
data: []
}
for (let i = startTime.value; i <= endTime.value; i++) {
if (index == 0) {
// 添加x轴 从08-23每个小时
data.categories.push(i < 10 ? '0' + i : i + '')
}
// 给每个数据列表添加与x轴对应的默认值0
day.data.push(' ' + 0)
}
data.series.push(day)
})
// dateList:日期 hour小时 num数量
// 02、添加完默认数据后 遍历请求到的数据 使用索引值将数据替换
// 遍历日期 也是遍历数据总条数
res.data.dateList?.forEach((item, i) => {
// 双重循环 遍历每一个小时
res.data.numList[i]?.forEach(item2 => {
// 查询在小时列表中有没有当前时间
if (data.categories.indexOf(item2.hour) != -1) {
// 如果有当前时间 将当前时间数字化 当做索引 去替换数据列表中的索引默认值
data.series[i].data[+item2.hour - startTime.value] = ' ' + item2.num
}
})
})
chartData.value = JSON.parse(JSON.stringify(data));
})
}