commit
This commit is contained in:
@@ -1,258 +0,0 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user