实现的效果图，点击最上面的按钮、三个用户模块以及时间的选择都会数据刷新
1.首先是点击时间会请求接口，点击其他模块是不会请求接口的，所以点击其他模块都是前端的计算，减少接口请求，提高用户的体验交互
后端返回的数据格式
[
{
"id": 391,
"totalUser": 4,
"newUser": 1055,
"dau": 816
},
{
"id": 389,
"totalUser": 225,
"newUser": 1055,
"dau": 3557
}
]
首先是遍历选择了那些按钮，再把相同的属性相加,再把返回的数据给到子组件的用户数据位置
//遍历点击了的按钮
var list = []
if (this.btnList.includes(item.id)) {
this.btnList = this.btnList.filter(v => v != item.id)
list = this.userList.filter(v => v.id != item.id)
} else {
this.btnList.push(item.id)
list = this.userList
}
if (this.btnList.length == 0) {
list = []
}
//合并相同的属性
mergeUserData (obj) {
let obj2 = {
totalUser: 0,
newUser: 0,
dau: 0
}
for (let i = 0; i < obj.length; i++) {
obj2.totalUser += obj[i].totalUser
obj2.newUser += obj[i].newUser
obj2.dau += obj[i].dau
}
return obj2
},
下面是柱状图的数据的处理，相同的道理也是遍历那些按钮被点亮了，以及选择的模块的id， 关键代码：arr.forEach(v => obj2[v.date] = obj2[v.date] === undefined ? v.count : obj2[v.date] + v.count)//合并数组对象里面的相同项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj = {
"389": {
"totalUser": [{
"count": 46,
"date": 1660924800000
},
{
"count": 46,
"date": 1661011200000
},
{
"count": 46,
"date": 1661097600000
},
{
"count": 47,
"date": 1661184000000
},
{
"count": 47,
"date": 1661270400000
},
{
"count": 47,
"date": 1661356800000
},
{
"count": 47,
"date": 1661443200000
},
{
"count": 48,
"date": 1661529600000
},
{
"count": 48,
"date": 1661616000000
},
{
"count": 48,
"date": 1661702400000
},
{
"count": 48,
"date": 1661788800000
},
{
"count": 48,
"date": 1661875200000
},
{
"count": 48,
"date": 1661961600000
},
{
"count": 48,
"date": 1662048000000
},
{
"count": 50,
"date": 1662134400000
},
{
"count": 50,
"date": 1662220800000
},
{
"count": 50,
"date": 1662307200000
},
{
"count": 50,
"date": 1662393600000
},
{
"count": 50,
"date": 1662480000000
},
{
"count": 51,
"date": 1662566400000
},
{
"count": 51,
"date": 1662652800000
},
{
"count": 51,
"date": 1662739200000
},
{
"count": 51,
"date": 1662825600000
},
{
"count": 51,
"date": 1662912000000
},
{
"count": 51,
"date": 1662998400000
},
{
"count": 51,
"date": 1663084800000
},
{
"count": 51,
"date": 1663171200000
},
{
"count": 51,
"date": 1663257600000
},
{
"count": 51,
"date": 1663344000000
},
{
"count": 51,
"date": 1663430400000
}
],
"newUser": [{
"count": 7,
"date": 1660924800000
},
{
"count": 2,
"date": 1661011200000
},
{
"count": 6,
"date": 1661097600000
},
{
"count": 4,
"date": 1661184000000
},
{
"count": 4,
"date": 1661270400000
},
{
"count": 19,
"date": 1661356800000
},
{
"count": 9,
"date": 1661443200000
},
{
"count": 23,
"date": 1661529600000
},
{
"count": 17,
"date": 1661616000000
},
{
"count": 10,
"date": 1661702400000
},
{
"count": 12,
"date": 1661788800000
},
{
"count": 14,
"date": 1661875200000
},
{
"count": 12,
"date": 1661961600000
},
{
"count": 13,
"date": 1662048000000
},
{
"count": 14,
"date": 1662134400000
},
{
"count": 21,
"date": 1662220800000
},
{
"count": 27,
"date": 1662307200000
},
{
"count": 18,
"date": 1662393600000
},
{
"count": 15,
"date": 1662480000000
},
{
"count": 19,
"date": 1662566400000
},
{
"count": 20,
"date": 1662652800000
},
{
"count": 19,
"date": 1662739200000
},
{
"count": 16,
"date": 1662825600000
},
{
"count": 21,
"date": 1662912000000
},
{
"count": 10,
"date": 1662998400000
},
{
"count": 8,
"date": 1663084800000
},
{
"count": 18,
"date": 1663171200000
},
{
"count": 10,
"date": 1663257600000
},
{
"count": 0,
"date": 1663344000000
},
{
"count": 0,
"date": 1663430400000
}
],
"dau": []
},
"391": {
"totalUser": [{
"count": 46,
"date": 1660924800000
},
{
"count": 46,
"date": 1661011200000
},
{
"count": 46,
"date": 1661097600000
},
{
"count": 47,
"date": 1661184000000
},
{
"count": 47,
"date": 1661270400000
},
{
"count": 47,
"date": 1661356800000
},
{
"count": 47,
"date": 1661443200000
},
{
"count": 48,
"date": 1661529600000
},
{
"count": 48,
"date": 1661616000000
},
{
"count": 48,
"date": 1661702400000
},
{
"count": 48,
"date": 1661788800000
},
{
"count": 48,
"date": 1661875200000
},
{
"count": 48,
"date": 1661961600000
},
{
"count": 48,
"date": 1662048000000
},
{
"count": 50,
"date": 1662134400000
},
{
"count": 50,
"date": 1662220800000
},
{
"count": 50,
"date": 1662307200000
},
{
"count": 50,
"date": 1662393600000
},
{
"count": 50,
"date": 1662480000000
},
{
"count": 51,
"date": 1662566400000
},
{
"count": 51,
"date": 1662652800000
},
{
"count": 51,
"date": 1662739200000
},
{
"count": 51,
"date": 1662825600000
},
{
"count": 51,
"date": 1662912000000
},
{
"count": 51,
"date": 1662998400000
},
{
"count": 51,
"date": 1663084800000
},
{
"count": 51,
"date": 1663171200000
},
{
"count": 51,
"date": 1663257600000
},
{
"count": 51,
"date": 1663344000000
},
{
"count": 51,
"date": 1663430400000
}
],
"newUser": [{
"count": 0,
"date": 1660924800000
},
{
"count": 0,
"date": 1661011200000
},
{
"count": 0,
"date": 1661097600000
},
{
"count": 1,
"date": 1661184000000
},
{
"count": 0,
"date": 1661270400000
},
{
"count": 0,
"date": 1661356800000
},
{
"count": 0,
"date": 1661443200000
},
{
"count": 1,
"date": 1661529600000
},
{
"count": 0,
"date": 1661616000000
},
{
"count": 0,
"date": 1661702400000
},
{
"count": 0,
"date": 1661788800000
},
{
"count": 0,
"date": 1661875200000
},
{
"count": 0,
"date": 1661961600000
},
{
"count": 0,
"date": 1662048000000
},
{
"count": 2,
"date": 1662134400000
},
{
"count": 0,
"date": 1662220800000
},
{
"count": 0,
"date": 1662307200000
},
{
"count": 0,
"date": 1662393600000
},
{
"count": 0,
"date": 1662480000000
},
{
"count": 1,
"date": 1662566400000
},
{
"count": 0,
"date": 1662652800000
},
{
"count": 0,
"date": 1662739200000
},
{
"count": 0,
"date": 1662825600000
},
{
"count": 0,
"date": 1662912000000
},
{
"count": 0,
"date": 1662998400000
},
{
"count": 0,
"date": 1663084800000
},
{
"count": 0,
"date": 1663171200000
},
{
"count": 0,
"date": 1663257600000
},
{
"count": 0,
"date": 1663344000000
},
{
"count": 0,
"date": 1663430400000
}
],
"dau": [{
"count": 2,
"date": 1663430400000
},
{
"count": 2,
"date": 1663430400000
},
{
"count": 5,
"date": 1663430400000
},
{
"count": 7,
"date": 1663430400000
},
{
"count": 9,
"date": 1663430400000
},
{
"count": 13,
"date": 1663430400000
},
{
"count": 9,
"date": 1663430400000
},
{
"count": 6,
"date": 1663430400000
},
{
"count": 4,
"date": 1663430400000
},
{
"count": 8,
"date": 1663430400000
},
{
"count": 8,
"date": 1663430400000
},
{
"count": 11,
"date": 1663430400000
},
{
"count": 8,
"date": 1663430400000
},
{
"count": 7,
"date": 1663430400000
},
{
"count": 7,
"date": 1663430400000
},
{
"count": 7,
"date": 1663430400000
},
{
"count": 7,
"date": 1663430400000
},
{
"count": 4,
"date": 1663430400000
},
{
"count": 5,
"date": 1663430400000
},
{
"count": 5,
"date": 1663430400000
},
{
"count": 8,
"date": 1663430400000
},
{
"count": 3,
"date": 1663430400000
},
{
"count": 2,
"date": 1663430400000
},
{
"count": 3,
"date": 1663430400000
},
{
"count": 4,
"date": 1663430400000
},
{
"count": 0,
"date": 1663084800000
},
{
"count": 0,
"date": 1663171200000
},
{
"count": 0,
"date": 1663257600000
},
{
"count": 0,
"date": 1663344000000
}
]
}
}
function getData(obj, id) {
let arr = []
let obj2 = {}
for (let key in obj) {
if (id == 1) {
obj[key].totalUser.forEach(item => {
item.date = timestampToTime(item.date)
arr.push(item)
})
} else if (id == 2) {
obj[key].newUser.forEach(item => {
arr.push(item)
})
} else if (id == 3) {
obj[key].dau.forEach(item => {
arr.push(item)
})
}
}
arr.forEach(
v => obj2[v.date] = obj2[v.date] === undefined ? v.count : obj2[v.date] + v.count
)
console.log(arr)
console.log(Object.keys(obj2));
let arr2 = []
arr2 = [Object.keys(obj2), Object.values(obj2)]
console.log(arr2)
return arr2
}
getData(obj, 1)
function timestampToTime(timestamp) {
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
let D = date.getDate() + ' ';
return M + D;
}
console.log(timestampToTime(1660924800000))
</script>
</body>
</html>
