herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

123

qin_24
herenshan112 4 months ago
parent
b764d10323
commit
0fb59328c7
1 changed files with 152 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 295
      src/views/dashboard/components/orguserage.vue

295
src/views/dashboard/components/orguserage.vue
View File

@ -3,162 +3,171 @@
@ 时间: 2023-11-08 18:48:27
@ 备注: 行政组织年龄结构
-->
<script lang='ts' setup>
import * as echarts from 'echarts'; //引入图形界面
import { statisticalAgeRatio } from '@/api/displayboardapi/indexapi'
<script lang="ts" setup>
import * as echarts from "echarts"; //引入图形界面
import { statisticalAgeRatio } from "@/api/displayboardapi/indexapi";
const props = defineProps({
educationOrgId:{
type:Number,
default:309
},
orgListCont:{
type:Object,
default(){
return {}
}
}
})
const orgAgeLoading = ref(false)
const orgAgeId = ref<number>(309)
let seriesOrgAgeData = new Array
const orgAgeTitle = ref<string>("年龄结构图")
educationOrgId: {
type: Number,
default: 309,
},
orgListCont: {
type: Object,
default() {
return {};
},
},
});
const orgAgeLoading = ref(false);
const orgAgeId = ref<number>(309);
let seriesOrgAgeData = new Array();
const orgAgeTitle = ref<string>("年龄结构图");
//设置画表对象
const orgAgeChart = ref<any>()
const orgAgeChart = ref<any>();
//获取学历图标对象
const darwOrgAgeChart = ref<any>(null)
const darwOrgAgeChart = ref<any>(null);
/**
* 获取年龄比例
*/
const gainOrgAgeRatio = () =>{
orgAgeLoading.value = true
statisticalAgeRatio({id:orgAgeId.value.toString()})
.then((data:any)=>{
if(data.code == 0){
seriesOrgAgeData.splice(0,seriesOrgAgeData.length);
if(data.data){
seriesOrgAgeData = data.data
// console.log("年龄结构图",seriesOrgAgeData)
let optionOrgAge = {
tooltip: {
trigger: 'item'
},
toolbox: {
x: 'right',
y: -5,
feature: {
saveAsImage: {}
}
},
series: [
{
type: 'pie',
radius: ['40%', '60%'],
center:['50%','58%'],
data: seriesOrgAgeData,
label: {
normal:{
show: true,
formatter: `{data|{b}} {serie|{c}人}`,
padding: [0, 15, 0, 0],
rich: {
data: {
fontSize: 14,
color: '#666666'
},
serie: {
fontSize: 15,
color: '#000000',
fontweight: 600,
padding: [0, 0, 0, 3]
}
}
}
}
},
// {
// type: 'pie',
// radius: ['40%', '60%'],
// data: seriesOrgAgeData,
// center:['50%','58%'],
// label: {
// normal:{
// position: 'inside',
// show: false,
// formatter: (d: any) => {
// return d.percent + '%'
// }
// }
// }
// }
]
};
orgAgeChart.value.clear();
orgAgeChart.value.setOption(optionOrgAge)
orgAgeLoading.value=false
}
}
})
.finally(()=>{
})
}
* 获取年龄比例
*/
const gainOrgAgeRatio = () => {
orgAgeLoading.value = true;
statisticalAgeRatio({ id: orgAgeId.value.toString() })
.then((data: any) => {
if (data.code == 0) {
seriesOrgAgeData.splice(0, seriesOrgAgeData.length);
if (data.data) {
seriesOrgAgeData = data.data;
console.log("年龄结构图", seriesOrgAgeData);
let optionOrgAge = {
tooltip: {
trigger: "item",
},
toolbox: {
x: "right",
y: -5,
feature: {
saveAsImage: {},
},
},
series: [
{
type: "pie",
radius: ["40%", "60%"],
center: ["50%", "58%"],
data: seriesOrgAgeData,
label: {
normal: {
show: true,
formatter: `{data|{b}} {serie|{c}人}`,
padding: [0, 15, 0, 0],
rich: {
data: {
fontSize: 14,
color: "#666666",
},
serie: {
fontSize: 15,
color: "#000000",
fontweight: 600,
padding: [0, 0, 0, 3],
},
},
},
},
},
// {
// type: 'pie',
// radius: ['40%', '60%'],
// data: seriesOrgAgeData,
// center:['50%','58%'],
// label: {
// normal:{
// position: 'inside',
// show: false,
// formatter: (d: any) => {
// return d.percent + '%'
// }
// }
// }
// }
],
};
orgAgeChart.value.clear();
orgAgeChart.value.setOption(optionOrgAge);
orgAgeLoading.value = false;
}
}
})
.finally(() => {});
};
onMounted(() => {
orgAgeId.value = props.educationOrgId
orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value))
gainOrgAgeRatio()
// 大小自适应
window.addEventListener('resize', () => {
orgAgeChart.value.resize();
});
})
orgAgeId.value = props.educationOrgId;
orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value));
gainOrgAgeRatio();
// 大小自适应
window.addEventListener("resize", () => {
orgAgeChart.value.resize();
});
});
</script>
<template>
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;position: relative;height: 100%;">
<!--单月全厂统计-->
<div class="orgAllMothsTitle">
<el-text class="titleInfo">{{ orgAgeTitle }}</el-text>
<el-select v-model="orgAgeId" placeholder="请选择公司" @change="gainOrgAgeRatio" style="width: 240px;">
<el-option
v-for="item in props.orgListCont"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<div ref="darwOrgAgeChart" v-loading="orgAgeLoading" element-loading-text="Loading..." class="allOrgAxisCares">
</div>
</el-card>
<el-card
shadow="always"
:body-style="{ padding: '10px' }"
style="border-radius: 12px; margin-top: 10px; position: relative; height: 100%"
>
<!--单月全厂统计-->
<div class="orgAllMothsTitle">
<el-text class="titleInfo">{{ orgAgeTitle }}</el-text>
<el-select
v-model="orgAgeId"
placeholder="请选择公司"
@change="gainOrgAgeRatio"
style="width: 240px"
>
<el-option
v-for="item in props.orgListCont"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</div>
<div
ref="darwOrgAgeChart"
v-loading="orgAgeLoading"
element-loading-text="Loading..."
class="allOrgAxisCares"
></div>
</el-card>
</template>
<style lang='scss' scoped>
<style lang="scss" scoped>
// .readback{
.allOrgAxisCares{
display: block;
width:100%;
height:330px;
}
.allOrgAxisCares {
display: block;
width: 100%;
height: 330px;
}
// }
.orgAllMothsTitle{
width:calc(100% - 55px);
display: flex;
align-items: center;
justify-content:space-between;
position: absolute;
left: 15px;
top: 5px;
z-index: 99;
.orgAllMothsTitle {
width: calc(100% - 55px);
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
left: 15px;
top: 5px;
z-index: 99;
}
.span_icon_left{
margin-right:10px;
.span_icon_left {
margin-right: 10px;
}
.titleInfo{
font-size: 18px;
font-weight: bold;
color: #000000;
.titleInfo {
font-size: 18px;
font-weight: bold;
color: #000000;
}
</style>

Write Preview
Loading…
Cancel
Save