538 lines
21 KiB
HTML
538 lines
21 KiB
HTML
<!--会员数据看板页面 djx 2019-5-29-->
|
||
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
|
||
<style>
|
||
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.echart-box {
|
||
width: 50%;
|
||
padding: 10px;
|
||
}
|
||
|
||
.year-box {
|
||
position: absolute;
|
||
right: 50px;
|
||
top: 10px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="app" v-cloak style="height: 100%;display: flex;">
|
||
|
||
<div style="width: 75%">
|
||
<div class="flexbox">
|
||
<div class="echart-box">
|
||
<div id="container1" :style="{height:echartboxheight}"></div>
|
||
</div>
|
||
<div class="echart-box">
|
||
<div id="container3" :style="{height:echartboxheight}"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flexbox">
|
||
<div class="echart-box">
|
||
<div id="container4" :style="{height:echartboxheight}"></div>
|
||
</div>
|
||
<div class="echart-box" style="position: relative;">
|
||
<div id="container5" :style="{height:echartboxheight}"></div>
|
||
<div class="year-box">
|
||
<el-date-picker type="year" format="yyyy年" value-format="yyyy" @change="yearchange"
|
||
v-model="yeararr" placeholder="请选择某一年度">
|
||
</el-date-picker>
|
||
----至今
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="fghcontainer" style="width: 25%;">
|
||
<el-table show-summary stripe :data="tableData" border style="width: 100%" :max-height="$('#app').height()">
|
||
<el-table-column align="center" label="基层工会" prop="unionname" :width="$('#fghcontainer').width() * 0.7"
|
||
:show-overflow-tooltip="true">
|
||
<template slot-scope="{row}">
|
||
{{row.unionname}}（{{row.unioncode}}）
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="会员人数" prop="hyzs" sortable></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
var vm = new Vue({
|
||
el: "#app",
|
||
data: function () {
|
||
return {
|
||
echartboxheight: '400px',
|
||
yeararr: moment().subtract(5, "years").format("YYYY"),
|
||
//表格数据
|
||
tableData: [],
|
||
//根据性别统计的数据
|
||
sex: [],
|
||
//根据政治面貌统计的数据
|
||
zzmm: [],
|
||
zzmmTj: [],
|
||
//根据学历统计的数据
|
||
xl: [],
|
||
xlTj: [],
|
||
//根据职称统计的数据
|
||
zc: [],
|
||
zcTj: [],
|
||
hyxdata: [],
|
||
hyydata: []
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
pageData: function () {
|
||
|
||
var self = this;
|
||
|
||
$.post(base + "/platform/hysjkb/init", {}, function (data) {
|
||
sublime.closeLoadingbar();//关闭loading
|
||
if (data.code == 0) {
|
||
self.tableData = data.data;
|
||
}
|
||
}, "json");
|
||
|
||
},
|
||
|
||
//根据性别统计会员
|
||
container1: function () {
|
||
|
||
var self = this;
|
||
var dom = document.getElementById("container1");
|
||
var myChart = echarts.init(dom);
|
||
optionsex = null;
|
||
$.post(base + "/platform/hysjkb/sexTj", null, function (data) {
|
||
sublime.closeLoadingbar();//关闭loading
|
||
if (data.code == 0) {
|
||
self.sex = data.data.finally;
|
||
optionsex = {
|
||
color: ['#F56C6C', '#2aaae3'],
|
||
title: {
|
||
text: '性别统计',
|
||
subtext: '人数',
|
||
x: 'left',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
saveAsImage: {}
|
||
},
|
||
right: 16,
|
||
},
|
||
legend: {
|
||
right: 'center',
|
||
data: ['男', '女']
|
||
},
|
||
series: [
|
||
{
|
||
name: '数据',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['45%', '50%'],
|
||
data: self.sex,
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
if (optionsex && typeof optionsex === "object") {
|
||
myChart.setOption(optionsex, true);
|
||
}
|
||
//完毕-----
|
||
|
||
} else {
|
||
self.$message({
|
||
message: data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}, "json");
|
||
},
|
||
|
||
//根据政治面貌统计会员
|
||
container2: function () {
|
||
var dom = document.getElementById("container2");
|
||
var myChart = echarts.init(dom);
|
||
option = null;
|
||
$.post(base + "/platform/hysjkb/zzmmTj", null, function (data) {
|
||
sublime.closeLoadingbar();//关闭loading
|
||
if (data.code == 0) {
|
||
self.zzmm = data.data.zzmm;
|
||
self.zzmmTj = data.data.zzmmTj;
|
||
//加载柱状图
|
||
option = {
|
||
title: {
|
||
text: '政治面貌',
|
||
subtext: '人数',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ["会员人数"],
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
saveAsImage: {}
|
||
},
|
||
right: 16,
|
||
},
|
||
height: 280,
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: self.zzmm,
|
||
},
|
||
color: [
|
||
"#46A3FF",
|
||
],
|
||
series: [{
|
||
name: "会员人数",
|
||
data: self.zzmmTj,
|
||
type: 'bar',
|
||
markPoint: {
|
||
data: [
|
||
{type: 'max', name: '最大值', symbolSize: [40, 40]},
|
||
{type: 'min', name: '最小值', symbolSize: [40, 40]}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#60C0DD', //圈圈的颜色
|
||
lineStyle: {
|
||
color: '#FE8463' //线的颜色
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart.setOption(option, true);
|
||
}
|
||
//完毕-------------------
|
||
} else {
|
||
self.$message({
|
||
message: data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}, "json");
|
||
|
||
},
|
||
|
||
//根据学历统计
|
||
container3: function () {
|
||
|
||
var self = this;
|
||
var dom = document.getElementById("container3");
|
||
var myChart = echarts.init(dom);
|
||
option = null;
|
||
$.post(base + "/platform/hysjkb/xlTj", null, function (data) {
|
||
sublime.closeLoadingbar();//关闭loading
|
||
if (data.code == 0) {
|
||
self.xl = data.data.xl;
|
||
self.xlTj = data.data.xlTj;
|
||
//加载折线图
|
||
option = {
|
||
title: {
|
||
text: '学历统计',
|
||
subtext: '人数',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
}
|
||
},
|
||
height: 280,
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ["会员人数"],
|
||
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
saveAsImage: {}
|
||
},
|
||
right: 16,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
// boundaryGap: false,
|
||
data: self.xl,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "会员人数",
|
||
type: 'line',
|
||
data: self.xlTj,
|
||
// markPoint: {
|
||
// data: [
|
||
// {type: 'max', name: '最大值', symbolSize: [40, 40]},
|
||
// {type: 'min', name: '最小值', symbolSize: [40, 40]}
|
||
// ]
|
||
// },
|
||
markLine: {
|
||
// data: [
|
||
// {type: 'average', name: '平均值'}
|
||
// ]
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#D19742',
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#D19742'
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart.setOption(option, true);
|
||
}
|
||
;
|
||
//完毕-------------------
|
||
} else {
|
||
self.$message({
|
||
message: data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}, "json");
|
||
},
|
||
|
||
//根据职称统计
|
||
container4: function () {
|
||
|
||
var self = this;
|
||
|
||
var dom = document.getElementById("container4");
|
||
var myChart = echarts.init(dom);
|
||
option = null;
|
||
$.post(base + "/platform/hysjkb/zcTj", null, function (data) {
|
||
sublime.closeLoadingbar();//关闭loading
|
||
if (data.code == 0) {
|
||
self.zc = data.data.zc;
|
||
self.zcTj = data.data.zcTj;
|
||
//加载图
|
||
option = {
|
||
title: {
|
||
text: '职称统计',
|
||
subtext: '人数',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ["会员人数"]
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
show: true,
|
||
saveAsImage: {},
|
||
right: 16,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: self.zc,
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '会员人数',
|
||
type: 'line',
|
||
stack: '人数',
|
||
// areaStyle: {},
|
||
data: self.zcTj,
|
||
// markPoint: {
|
||
// data: [
|
||
// {type: 'max', name: '最大值', symbolSize: [40, 40]},
|
||
// {type: 'min', name: '最小值', symbolSize: [40, 40]}
|
||
// ]
|
||
// },
|
||
// markLine: {
|
||
// data: [
|
||
// {type: 'average', name: '平均值'}
|
||
// ]
|
||
// },
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart.setOption(option, true);
|
||
}
|
||
;
|
||
//完毕-------------------
|
||
} else {
|
||
self.$message({
|
||
message: data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
}, "json");
|
||
},
|
||
|
||
//年度新增会员统计
|
||
container5: function () {
|
||
var self = this;
|
||
var dom5 = document.getElementById("container5");
|
||
window.myChart5 = echarts.init(dom5);
|
||
var option5 = null;
|
||
$.post('/platform/hysjkb/hyuseraddYear', {year: self.yeararr}, function (data) {
|
||
self.hyxdata = data.data.year;
|
||
self.hyydata = data.data.hynum;
|
||
option5 = {
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
title: {
|
||
text: '会员增长趋势图',
|
||
textStyle: {
|
||
fontSize: 15,
|
||
fontWeight: 'normal',
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: self.hyxdata
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: self.hyydata,
|
||
type: 'line',
|
||
smooth: true
|
||
}]
|
||
};
|
||
myChart5.setOption(option5);
|
||
});
|
||
},
|
||
|
||
yearchange(year) {
|
||
var self = this;
|
||
if (parseInt(year) >= parseInt(moment().format('YYYY'))) {
|
||
this.$message.warning('请选择小于当前的年份');
|
||
return;
|
||
}
|
||
$.post('/platform/hysjkb/hyuseraddYear', {year: year}, function (data) {
|
||
self.hyxdata = data.data.year;
|
||
self.hyydata = data.data.hynum;
|
||
var newoption = myChart5.getOption();
|
||
newoption.xAxis[0].data = self.hyxdata;
|
||
newoption.series[0].data = self.hyydata;
|
||
myChart5.setOption(newoption);
|
||
});
|
||
}
|
||
},
|
||
created: function () {
|
||
this.pageData();
|
||
},
|
||
mounted: function () {
|
||
this.container1();
|
||
//this.container2();
|
||
this.container3();
|
||
this.container4();
|
||
this.container5();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!--#
|
||
}
|
||
#--> |