<!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/vue@2.5.16/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>
来源：CSDN
作者：弗兰克方
链接：https://blog.csdn.net/frank_fong/article/details/103925729