258 lines
9.3 KiB
HTML
258 lines
9.3 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.el-card {
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<el-card>
|
|
<div id="zttj" style="width: 47%;height: 450px;display: inline-block;"></div>
|
|
<div style="height: 400px;width: 1px;background-color: gainsboro;display: inline-block;"></div>
|
|
<div id="jgtj" style="width: 47%;height: 450px;display: inline-block;"></div>
|
|
</el-card>
|
|
<!-- <el-card>
|
|
<div id="fghtj" style="width: 100%;height: 450px;display: inline-block;"></div>
|
|
</el-card>-->
|
|
<el-card>
|
|
<div id="nftj" style="width: 100%;height: 450px;display: inline-block;"></div>
|
|
</el-card>
|
|
|
|
</div>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: "#app",
|
|
data: function () {
|
|
return {
|
|
ghlist:[],
|
|
nflist:[]
|
|
}
|
|
},
|
|
methods: {
|
|
data:function () {
|
|
var self=this;
|
|
$.post(base+"/platform/zcgl/sjkb/data",function (data) {
|
|
self.initZttj(data.data.zttj);
|
|
var union=data.data.fghtj;
|
|
var sl=[]
|
|
union.forEach(function (val) {
|
|
self.ghlist.push(val.unionname);
|
|
sl.push(val.sl)
|
|
})
|
|
var jg=data.data.jgtj[0];
|
|
var jgsl=[];
|
|
jgsl.push(jg.a);
|
|
jgsl.push(jg.b);
|
|
jgsl.push(jg.c);
|
|
jgsl.push(jg.d);
|
|
jgsl.push(jg.e);
|
|
jgsl.push(jg.f);
|
|
|
|
var nf=data.data.nftj;
|
|
var nfsl=[]
|
|
nf.forEach(function (val) {
|
|
self.nflist.push(val.year);
|
|
nfsl.push(val.sl);
|
|
})
|
|
//self.initFghtj(sl)
|
|
self.initjgtj(jgsl);
|
|
self.initNftj(nfsl);
|
|
|
|
})
|
|
},
|
|
initZttj: function (data) {
|
|
var self = this;
|
|
var lmxjHj= echarts.init(document.getElementById("zttj"));
|
|
var option = {
|
|
title: {
|
|
text: '固定资产状态统计',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['在用','闲置','未使用','待报废','校外转入','校内转入','其它']
|
|
},
|
|
series: [
|
|
{
|
|
name: '资产状态',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{value: data[0].zy, name: '在用'},
|
|
{value: data[0].xz, name: '闲置'},
|
|
{value: data[0].wsy, name: '未使用'},
|
|
{value: data[0].dbf, name: '待报废'},
|
|
{value: data[0].xwzr, name: '校外转入'},
|
|
{value: data[0].xnzr, name: '校内转入'},
|
|
{value: data[0].qt, name: '其它'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
lmxjHj.setOption(option);
|
|
|
|
},
|
|
initFghtj:function (data) {
|
|
var dom = document.getElementById("fghtj");
|
|
var myChart = echarts.init(dom);
|
|
optionwwrstj = null;
|
|
//加载柱状图
|
|
optionwwrstj = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
title : {
|
|
text: '固定资产所属分工会统计',
|
|
},
|
|
grid: { // 控制图的大小，调整下面这些值就可以，
|
|
x: 40,
|
|
x2: 100,
|
|
y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.ghlist,
|
|
axisLabel: {
|
|
interval: 0,
|
|
formatter:function(value)
|
|
{
|
|
return value.split("").join("\n");
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: data,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
type: 'bar'
|
|
}]
|
|
};
|
|
if (optionwwrstj && typeof optionwwrstj === "object") {
|
|
myChart.setOption(optionwwrstj, true);
|
|
}
|
|
},
|
|
initjgtj:function (data) {
|
|
var dom = document.getElementById("jgtj");
|
|
var myChart = echarts.init(dom);
|
|
optionwwrstj = null;
|
|
//加载柱状图
|
|
optionwwrstj = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
title : {
|
|
text: '固定资产购置价格统计',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ["2000以下","2000-4000","4000-6000","6000-8000","8000-10000","10000以上"],
|
|
axisLabel: {
|
|
interval:0,
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: data,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
type: 'bar'
|
|
}]
|
|
};
|
|
if (optionwwrstj && typeof optionwwrstj === "object") {
|
|
myChart.setOption(optionwwrstj, true);
|
|
}
|
|
},
|
|
initNftj:function (data) {
|
|
var dom = document.getElementById("nftj");
|
|
var myChart = echarts.init(dom);
|
|
optionwwrstj = null;
|
|
//加载柱状图
|
|
optionwwrstj = {
|
|
color: ['#3398DB'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
title : {
|
|
text: '固定资产年度数量统计',
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.nflist,
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [{
|
|
data: data,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
type: 'line'
|
|
}]
|
|
};
|
|
if (optionwwrstj && typeof optionwwrstj === "object") {
|
|
myChart.setOption(optionwwrstj, true);
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
this.data();
|
|
},
|
|
mounted: function () {
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#--> |