遍历图表数据 图表数据x轴数据模式一样 格式不同时

例如返回数据

例如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));
	})
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值