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

发布时间:2024年01月19日

例如返回数据

例如x轴的数据是每小时的? 但是第一条数据的小时数是08? 第二条是10 下方代码解决这个问题

//数据条数区间
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));
	})
}

文章来源:https://blog.csdn.net/sdgjah2/article/details/135691165
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。