first commit
This commit is contained in:
@@ -0,0 +1,538 @@
|
||||
<!--会员数据看板页面 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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user