You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
9.7 KiB
457 lines
9.7 KiB
<template>
|
|
<div class="container">
|
|
<div class="head">
|
|
<div class="center">数据大屏</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="analysis" id="analysis1"></div>
|
|
<div class="analysis" id="analysis2"></div>
|
|
<div class="analysis" id="analysis3"></div>
|
|
<div class="analysis" id="analysis4"></div>
|
|
<div class="analysis" id="analysis5"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { bigDataTag, bigDataAge, bigDataSex, bigDataActive, bigDataWish } from "@/api/szxc/sjdp";
|
|
import * as echarts from 'echarts';
|
|
|
|
let barChart1 = null;
|
|
let barChart2 = null;
|
|
let barChart3 = null;
|
|
let barChart4 = null;
|
|
let barChart5 = null;
|
|
|
|
function resizeFun() {
|
|
barChart1.resize();
|
|
barChart2.resize();
|
|
barChart3.resize();
|
|
barChart4.resize();
|
|
barChart5.resize();
|
|
}
|
|
|
|
export default {
|
|
name: "Index",
|
|
data() {
|
|
return {
|
|
age: {
|
|
legend: [],
|
|
xAxis: [],
|
|
series: []
|
|
},
|
|
sex: {
|
|
xAxis: [],
|
|
series: []
|
|
},
|
|
tag: {
|
|
legend: [],
|
|
xAxis: [],
|
|
series: []
|
|
},
|
|
active: {
|
|
legend: [],
|
|
xAxis: [],
|
|
series: []
|
|
},
|
|
wish: {
|
|
legend: [],
|
|
xAxis: [],
|
|
series: []
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getBigDataAge()
|
|
this.getBigDataSex()
|
|
this.getBigDataTag()
|
|
this.getBigDataActive()
|
|
this.getBigDataWish()
|
|
},
|
|
beforeDestroy() {
|
|
if (!barChart1) {
|
|
return
|
|
}
|
|
barChart1.dispose()
|
|
barChart2.dispose()
|
|
barChart3.dispose()
|
|
barChart4.dispose()
|
|
barChart5.dispose()
|
|
|
|
barChart1 = null
|
|
barChart2 = null
|
|
barChart3 = null
|
|
barChart4 = null
|
|
barChart5 = null
|
|
|
|
window.removeEventListener("resize", resizeFun);
|
|
},
|
|
methods: {
|
|
// 年龄
|
|
getBigDataAge() {
|
|
bigDataAge().then(response => {
|
|
this.age.legend = []
|
|
this.age.xAxis = ['0-12岁','13-17岁','18-22岁','23-30岁','31-59岁','60岁以上']
|
|
this.age.series = []
|
|
|
|
response.forEach(item => {
|
|
this.age.legend.push(item.dept_name);
|
|
let arr = [];
|
|
|
|
this.age.xAxis.forEach(item1=>{
|
|
arr.push(item[item1])
|
|
})
|
|
|
|
this.age.series.push(
|
|
{
|
|
name: item.dept_name,
|
|
type:'line',
|
|
data: arr
|
|
}
|
|
)
|
|
})
|
|
this.initChart();
|
|
});
|
|
},
|
|
// 性别
|
|
getBigDataSex() {
|
|
bigDataSex().then(response => {
|
|
this.sex.xAxis = []
|
|
this.sex.series = []
|
|
|
|
let arr1 = [];
|
|
let arr2 = [];
|
|
let arr3 = [];
|
|
response.forEach(item => {
|
|
this.sex.xAxis.push(item.dept_name);
|
|
arr1.push(item.headCount)
|
|
arr2.push(item.man)
|
|
arr3.push(item.women)
|
|
})
|
|
|
|
this.sex.series = [{
|
|
name: '总数',
|
|
type: 'bar',
|
|
data: arr1
|
|
},
|
|
{
|
|
name: '男',
|
|
type: 'bar',
|
|
data: arr2
|
|
},
|
|
{
|
|
name: '女',
|
|
type: 'bar',
|
|
data: arr3
|
|
}]
|
|
|
|
this.initChart()
|
|
});
|
|
},
|
|
// 标签
|
|
getBigDataTag() {
|
|
bigDataTag().then(response => {
|
|
this.tag.legend = []
|
|
this.tag.xAxis = []
|
|
this.tag.series = []
|
|
|
|
if(response && response[0]){
|
|
this.tag.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
|
|
}
|
|
|
|
response.forEach(item => {
|
|
this.tag.legend.push(item.dept_name);
|
|
let arr = [];
|
|
|
|
this.tag.xAxis.forEach(item1=>{
|
|
arr.push(item[item1])
|
|
})
|
|
|
|
this.tag.series.push(
|
|
{
|
|
name: item.dept_name,
|
|
type:'bar',
|
|
data: arr
|
|
}
|
|
)
|
|
})
|
|
this.initChart()
|
|
});
|
|
},
|
|
// 活动
|
|
getBigDataActive() {
|
|
bigDataActive().then(response => {
|
|
this.active.xAxis = []
|
|
this.active.series = []
|
|
|
|
let arr1 = [];
|
|
let arr2 = [];
|
|
let arr3 = [];
|
|
let arr4 = [];
|
|
response.forEach(item => {
|
|
this.active.xAxis.push(item.dept_name);
|
|
arr1.push(item.num)
|
|
arr2.push(item['待开始'])
|
|
arr3.push(item['进行中'])
|
|
arr3.push(item['已结束'])
|
|
})
|
|
|
|
this.active.series = [{
|
|
name: '总数',
|
|
type: 'bar',
|
|
data: arr1
|
|
},
|
|
{
|
|
name: '待开始',
|
|
type: 'bar',
|
|
data: arr2
|
|
},
|
|
{
|
|
name: '进行中',
|
|
type: 'bar',
|
|
data: arr3
|
|
},
|
|
{
|
|
name: '已结束',
|
|
type: 'bar',
|
|
data: arr4
|
|
}
|
|
]
|
|
|
|
this.initChart()
|
|
});
|
|
},
|
|
// 心愿
|
|
getBigDataWish() {
|
|
bigDataWish().then(response => {
|
|
this.wish.legend = []
|
|
this.wish.xAxis = []
|
|
this.wish.series = []
|
|
|
|
if(response && response[0]){
|
|
this.wish.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
|
|
}
|
|
|
|
response.forEach(item => {
|
|
this.wish.legend.push(item.dept_name);
|
|
let arr = [];
|
|
|
|
this.wish.xAxis.forEach(item1=>{
|
|
arr.push(item[item1])
|
|
})
|
|
|
|
this.wish.series.push(
|
|
{
|
|
name: item.dept_name,
|
|
type:'bar',
|
|
data: arr
|
|
}
|
|
)
|
|
})
|
|
this.initChart()
|
|
});
|
|
},
|
|
initChart() {
|
|
const _this = this;
|
|
|
|
barChart1 = echarts.init(document.getElementById('analysis1'));
|
|
barChart1.setOption({
|
|
title: {
|
|
text: '年龄分布'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: _this.age.legend
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: _this.age.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: _this.age.series
|
|
});
|
|
|
|
barChart2 = echarts.init(document.getElementById('analysis2'));
|
|
barChart2.setOption({
|
|
title: {
|
|
text: '性别分布'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data:["总数","男","女"]
|
|
},
|
|
xAxis: {
|
|
data: this.sex.xAxis
|
|
},
|
|
yAxis: {},
|
|
series: this.sex.series
|
|
});
|
|
|
|
barChart3 = echarts.init(document.getElementById('analysis3'));
|
|
barChart3.setOption({
|
|
title: {
|
|
text: '标签分布'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: _this.tag.legend
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: _this.tag.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: _this.tag.series
|
|
});
|
|
|
|
barChart4 = echarts.init(document.getElementById('analysis4'));
|
|
barChart4.setOption({
|
|
title: {
|
|
text: '活动分布'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['总数', '待开始', '进行中', '已结束']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: _this.active.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: _this.active.series
|
|
});
|
|
|
|
barChart5 = echarts.init(document.getElementById('analysis5'));
|
|
barChart5.setOption({
|
|
title: {
|
|
text: '心愿分布'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: _this.wish.legend
|
|
},
|
|
grid: {
|
|
left: '5%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: _this.wish.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: _this.wish.series
|
|
});
|
|
|
|
window.addEventListener("resize", resizeFun)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: url("../../../assets/images/img.png") no-repeat 100% 100%;
|
|
|
|
.head {
|
|
margin: 0 auto;
|
|
width: 50%;
|
|
min-width: 600px;
|
|
z-index: 20;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.center {
|
|
background: url("../../../assets/images/head.gif") no-repeat center 43% ;
|
|
background-size: 100%;
|
|
height: 10vh;
|
|
line-height: 7vh;
|
|
flex: 1;
|
|
font-size: 5vh;
|
|
color: #5cf8ff;
|
|
font-family: cursive;
|
|
font-weight: bolder;
|
|
text-shadow: 2px 2px 3px #ffdd45;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100vw;
|
|
height: 90vh;
|
|
box-sizing: border-box;
|
|
padding: 0 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.analysis{
|
|
width: 600px;
|
|
min-width: 400px;
|
|
height: 400px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
background: rgba(255,255,255,0.8);
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|