113 lines
3.6 KiB
HTML
113 lines
3.6 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-card__body {
|
|
padding: 0px;
|
|
}
|
|
</style>
|
|
<div id="app" v-clock>
|
|
<el-card class="box-card">
|
|
<el-row class="header navbar bg-white shadow" style="padding-left: 5px;padding-right: 5px;background-color: #e6f1fe;">
|
|
<div class="btn-group tool-button mt5" style="width: 100%">
|
|
<el-date-picker style="width: 100%"
|
|
@change="init"
|
|
v-model="year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
<el-card class="box-card" >
|
|
<div slot="header" class="clearfix" >
|
|
<span style="font-size: 18px">基层工会活动场地使用情况</span>
|
|
</div>
|
|
<div class="text item" style="height: 500px;" >
|
|
<div id="container1" style="height:100%;width: 100%"></div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<script>
|
|
window.vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
cd:[],
|
|
count:[],
|
|
year:moment().format('YYYY')
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(){
|
|
$.ajaxSettings.async=false;
|
|
$.post(base + "/platform/hd/hdcxtj/zhtj/cdTj",{year:this.year}).then(res=>{
|
|
this.cd = res.data.cd
|
|
this.count = res.data.count
|
|
})
|
|
$.ajaxSettings.async=true;
|
|
let self=this
|
|
let option = {
|
|
title : {
|
|
// text: '场地使用情况统计',
|
|
// x:'left'
|
|
},
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "使用率： <br/>{b} : {c} ({d}%)"
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
|
|
},
|
|
right:16,
|
|
},
|
|
legend: {
|
|
right: 'right',
|
|
data: self.cd,
|
|
},
|
|
series : [
|
|
{
|
|
name: '数据',
|
|
type: 'pie',
|
|
radius : '70%',
|
|
center: ['45%', '50%'],
|
|
label: {
|
|
normal: {
|
|
textStyle : {
|
|
fontWeight : 'normal',
|
|
fontSize : 18
|
|
}
|
|
}
|
|
},
|
|
data: self.count,
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
let dom = document.getElementById("container1");
|
|
let myChart = echarts.init(dom,'westeros');
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|