<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element-ui</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
new Vue({
el: "#app",
data: {
unlockType: [{
code: "A",
name1: "APP開門"
},
{
code: "F",
name1: "人臉識別"
},
{
code: "P",
name1: "語音對講"
},
{
code: "C",
name1: "刷卡開門"
},
{
code: "V",
name1: "APP對講"
},
{
code: "S",
name1: "物業開門"
},
{
code: "R",
name1: "人證開門"
},
{
code: "B",
name1: "美數小程序開門"
},
{
code: "H",
name1: "海納小程序開門"
},
{
code: "W",
name1: "手環開門"
},
{
code: "T",
name1: "二維碼開門"
}
],
list: [{
num: 0,
fdate: "2020-01-04",
unlockType: "APP開門",
unlockTypeId: "A",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "美數小程序開門",
unlockTypeId: "B",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "刷卡開門",
unlockTypeId: "C",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "人臉識別",
unlockTypeId: "F",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "海納小程序開門",
unlockTypeId: "H",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "語音對講",
unlockTypeId: "P",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "人證開門",
unlockTypeId: "R",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "物業開門",
unlockTypeId: "S",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "二維碼開門",
unlockTypeId: "T",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "APP對講",
unlockTypeId: "V",
}, {
num: 0,
fdate: "2020-01-04",
unlockType: "手環開門",
unlockTypeId: "W",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "APP開門",
unlockTypeId: "A",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "美數小程序開門",
unlockTypeId: "B",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "刷卡開門",
unlockTypeId: "C",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "人臉識別",
unlockTypeId: "F",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "海納小程序開門",
unlockTypeId: "H",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "語音對講",
unlockTypeId: "P",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "人證開門",
unlockTypeId: "R",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "物業開門",
unlockTypeId: "S",
}, {
num: 0,
fdate: "2020-01-05",
unlockType: "二維碼開門",
unlockTypeId: "T",
}],
series: []
},
created() {
//第一次遍歷
this.unlockType.forEach((item, index) => {
//先在數組中建幾個對象
this.series.push({
date: [],
data: []
});
//遍歷裏再遍歷
this.list.forEach(i => {
//將合適
if (item.code == i.unlockTypeId) {
this.series[index].date.push(i.fdate);
this.series[index].data.push(i.num)
}
})
});
console.log(this.series);
}
})
</script>
</body>
</html>
