114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<template>
|
|
<!-- 人员类型 -->
|
|
<Card :title="title">
|
|
<div class="containerBox">
|
|
<div class="myChart" ref="myChart"></div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from "../components/Card.vue";
|
|
|
|
import echarts from "echarts4";
|
|
export default {
|
|
components: { Card },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "default title"
|
|
},
|
|
statisticsCount:{
|
|
type: Object,
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
mounted() {
|
|
this.initMyChart();
|
|
},
|
|
watch:{
|
|
statisticsCount:{
|
|
handler(newVal,oldVal){
|
|
if(newVal!=oldVal){
|
|
this.initMyChart();
|
|
}
|
|
},
|
|
deep:true,
|
|
}
|
|
},
|
|
methods: {
|
|
initMyChart() {
|
|
const myChart = echarts.init(this.$refs.myChart);
|
|
const option = {
|
|
title:{
|
|
text:this.statisticsCount.workercount.totalPerson,
|
|
subtext:'在册总人数',
|
|
x:'48%',
|
|
y:'40%',
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#41a4b5',
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#41a4b5'
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
roseType: "radius",
|
|
radius: [45, 70],
|
|
color:[ '#f7d400', '#786ef0', '#64f8ff', ],
|
|
left: "center",
|
|
width: 400,
|
|
label: {
|
|
formatter: "{name|{b}}\n{time|{c} 人}",
|
|
minMargin: 5,
|
|
edgeDistance: 5 ,
|
|
lineHeight: 20,
|
|
rich: {
|
|
time: {
|
|
fontSize: 12,
|
|
// color: "#999"
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 15,
|
|
length2: 10,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: [
|
|
{ name: "管理人员", value: this.statisticsCount.workercount.glPersonTotal },
|
|
{ name: "施工人员", value: this.statisticsCount.workercount.lwPersonTotal },
|
|
{ name: "临时人员", value: this.statisticsCount.workercount.lsPersonTotal },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.myChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
color:#f7d400;
|
|
}
|
|
}
|
|
</style>
|
|
|