cxc-szcx-uniapp/pages/views/renliziyuan/renyuanxinxi/tongji.vue

<template>
	<view>
		<uni-card>
			<uni-forms>
				<uni-forms-item label="所属单位" label-position="top" name="depart">
					<trq-depart-select returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>
				</uni-forms-item>
			</uni-forms>
			<uni-row>
				<uni-col :span="12"><button @click="getRyByxb(0)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">性别分组统计</button></uni-col>
				<uni-col :span="12"><button @click="getRyBynl(0)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">年龄分组统计</button></uni-col>
			</uni-row><uni-row><uni-col :span="12"><button @click="getRyByxb(1)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">性别全厂统计</button></uni-col>
				<uni-col :span="12"><button @click="getRyBynl(1)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">年龄全厂统计</button></uni-col>
			</uni-row>
		</uni-card>
		<uni-card>
			<view>
				<l-echart ref="chartRef"></l-echart>
			</view>

		</uni-card>
	</view>
</template>


<script setup>
	import * as echarts from 'echarts'

	import {
		onReady,
		onLoad

	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		useStore
	} from '@/store';
	import {
		cxcRyDatacountByXb,
		cxcRyDatacountByNl,
		cxcRyDatacountByXbTotal,
		cxcRyDatacountByNlTotal
	} from '@/api/renyuan.js'



	const chartRef = ref(null)
	const ryCountData = ref([])
	const departID = ref("")

	const option = ref({
		notMerge: true,
		backgroundColor: '#F8FAFF',
		tooltip: {
			trigger: 'axis',
			showContent: "人员统计",
			axisPointer: {
				type: 'shadow',
				label: {
					show: true
				}
			}
		},
		title: {
			text: '人员统计图表'
		},
		toolbox: {
			padding: [0, 20, 20, 20],
			show: true,
			feature: {
				//工具配置项
				mark: {
					show: true
				},
				dataView: {
					show: true
				},
				magicType: {
					show: true, //是否显示该工具
					type: ['line', 'bar'] //启用的动态类型
				},
				dataZoom: {
					yAxisIndex: 'none'
				},
				restore: {
					show: true //是否显示该工具
				},
				saveAsImage: {
					show: true //是否显示该工具
				}
			}
		},
		calculable: false, //是否显示拖拽的手柄
		// itemHeight: 0,
		legend: {
			//图例组件
			data: [],
			itemGap: 24,
			padding: [5, 15, 10, 15],
			// y: 'bottom',
			itemHeight: 8, //高
			itemWidth: 8, //宽
			type: 'scroll',
			top: 40,
		},
		grid: {
			top: '15%',
			left: '4%',
			right: '4%',
			bottom: '6%',
			containLabel: true
		},
		xAxis: [{
			show: true,
			type: 'category', //坐标轴类型
			// boundaryGap:false, //解决数据与线不对应问题
			data: [],
			// offset:50,
			//['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11', ], //this.xList, //obama_budget_2012.names
			axisLabel: {
				color: '#7F84B5',
				fontWeight: 300,
				interval: 0,
				rotate: 70
			},
			axisTick: {
				show: false //刻度线
			},
			axisLine: {
				show: false //不显示坐标轴线
			}
		}],
		yAxis: [{
			show: true,
			boundaryGap: false, //解决数据与线不对应问题
			type: 'value',
			// name: 'Budget (million USD)',
			// data: this.yList,
			minInterval: 1,
			axisLabel: {
				interval: 0
			},
			splitLine: {
				show: true,
				lineStyle: {
					//背景网格线
					type: 'dashed'
				}
			},

			axisTick: {
				show: true //刻度线
			},
			axisLine: {
				show: false //不显示坐标轴线
			}
		}],
		dataZoom: [{
				show: true,
				start: 80,
				end: 100,
				handleSize: 10
			},
			{
				type: 'inside',
				start: 0,
				end: 50
			},
			{
				show: false,
				yAxisIndex: 0,
				filterMode: 'empty',
				width: 12,
				height: '80%',
				showDataShadow: false,
				left: '93%',
				handleSize: 8
			}
		],
		series: []
	});

	const xData = ref([])
	const ySeries = ref([])
	const legData = ref([])

	function departChange(e) {
		departID.value = e
	}

	function getRyByxb(val) {
		ryCountData.value = []
		let queryParm = {};
		queryParm.orgCode = departID.value
		if (val == 0) {
			cxcRyDatacountByXb(queryParm).then((res) => {
				if (res.success) {
					ryCountData.value = res.result
					// console.log(ryCountData.value);
					xData.value = [];
					ySeries.value = [];
					legData.value = [];
					let serie = {
						name: '',
						type: 'bar',
						data: [],
						itemStyle: {
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: {
									//数值样式
									color: 'black',
									fontSize: 16
								}
							}
						}
					};

					let serieMan = JSON.parse(JSON.stringify(serie));
					let serieTotal = JSON.parse(JSON.stringify(serie));
					serieTotal.name = '总数';
					serieMan.name = '男';
					let serieWoman = JSON.parse(JSON.stringify(serie));
					serieWoman.name = '女';
					ryCountData.value.map(item => {
						xData.value.push(item.depart_name);
						serieMan.data.push(item.man);
						serieWoman.data.push(item.woman);
						serieTotal.data.push(item.total);
					});
					ySeries.value.push(serieTotal);
					ySeries.value.push(serieMan);
					ySeries.value.push(serieWoman);
					legData.value = ['总数', '男', '女'];
					option.value.legend.data = legData.value;
					option.value.xAxis[0].data = xData.value;
					option.value.series = ySeries.value;
					option.value.title.text = '人员性别统计';

				}

				setTimeout(async () => {
					if (!chartRef.value) return
					const myChart = await chartRef.value.init(echarts)
					myChart.setOption(option.value)
				}, 300)


			}).catch((err) => {
				console.log(err);
			})
		}
		if (val == 1) {

			cxcRyDatacountByXbTotal(queryParm).then((res) => {
				if (res.success) {
					ryCountData.value = res.result
					xData.value = [];
					ySeries.value = [];
					legData.value = [];
					let serie = {
						name: '',
						type: 'bar',
						data: [],
						itemStyle: {
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: {
									//数值样式
									color: 'black',
									fontSize: 16
								}
							}
						}
					};

					let serieMan = JSON.parse(JSON.stringify(serie));
					let serieTotal = JSON.parse(JSON.stringify(serie));
					serieTotal.name = '总数';
					serieMan.name = '男';
					let serieWoman = JSON.parse(JSON.stringify(serie));
					serieWoman.name = '女';
					ryCountData.value.map(item => {
						xData.value.push("全厂");
						serieMan.data.push(item.man);
						serieWoman.data.push(item.woman);
						serieTotal.data.push(item.total);
					});
					ySeries.value.push(serieTotal);
					ySeries.value.push(serieMan);
					ySeries.value.push(serieWoman);
					legData.value = ['总数', '男', '女'];
					option.value.legend.data = legData.value;
					option.value.xAxis[0].data = xData.value;
					option.value.series = ySeries.value;
					option.value.title.text = '人员性别统计';

				}

				setTimeout(async () => {
					if (!chartRef.value) return
					const myChart = await chartRef.value.init(echarts)
					myChart.setOption(option.value)
				}, 300)


			}).catch((err) => {
				console.log(err);
			})
		}
	}

	function getRyBynl(val) {
		ryCountData.value = []
		let queryParm = {};
		queryParm.orgCode = departID.value
		if (val == 0) {
			cxcRyDatacountByNl(queryParm).then((res) => {
				if (res.success) {
					ryCountData.value = res.result
					xData.value = [];
					ySeries.value = [];
					legData.value = [];
					let serie = {
						name: '',
						type: 'bar',
						data: [],
						itemStyle: {
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: {
									//数值样式
									color: 'black',
									fontSize: 16
								}
							}
						}
					};


					let serie20 = JSON.parse(JSON.stringify(serie));
					serie20.name = '小于20岁';
					let serie21_30 = JSON.parse(JSON.stringify(serie));
					serie21_30.name = '21-30岁';
					let serie31_40 = JSON.parse(JSON.stringify(serie));
					serie31_40.name = '31-40岁';
					let serie41_50 = JSON.parse(JSON.stringify(serie));
					serie41_50.name = '41-50岁';
					let serie51_60 = JSON.parse(JSON.stringify(serie));
					serie51_60.name = '51-60岁';
					let serie45 = JSON.parse(JSON.stringify(serie));
					serie45.name = '45岁及以下';
					let serie46_60 = JSON.parse(JSON.stringify(serie));
					serie46_60.name = '45岁以上';
					let serie51_55 = JSON.parse(JSON.stringify(serie));
					serie51_55.name = '51-55岁';
					let serie55 = JSON.parse(JSON.stringify(serie));
					serie55.name = '55岁以上';
					let serietotal = JSON.parse(JSON.stringify(serie));
					serietotal.name = '总数';
					let serieavgage = JSON.parse(JSON.stringify(serie));
					serieavgage.name = '平均年龄';

					ryCountData.value.map(item => {
						xData.value.push(item.depart_name);
						serietotal.data.push(item.total);
						serie20.data.push(item.age20);
						serie21_30.data.push(item.age21_30);
						serie31_40.data.push(item.age31_40);
						serie41_50.data.push(item.age41_50);
						serie51_60.data.push(item.age51_60);
						serie45.data.push(item.age45);
						serie46_60.data.push(item.age46_60);
						serie51_55.data.push(item.age51_55);
						serie55.data.push(item.age55);
						serieavgage.data.push(item.avgage);

					});
					this.ySeries.push(serietotal);
					this.ySeries.push(serieavgage);
					this.ySeries.push(serie20);
					this.ySeries.push(serie21_30);
					this.ySeries.push(serie31_40);
					this.ySeries.push(serie41_50);
					this.ySeries.push(serie51_60);
					this.ySeries.push(serie45);
					this.ySeries.push(serie46_60);
					this.ySeries.push(serie51_55);
					this.ySeries.push(serie55);

					legData.value = ['总数', '平均年龄', '小于20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '45岁及以下',
						'45岁以上', '51-55岁', '55岁以上'
					];


					option.value.legend.data = legData.value;
					option.value.xAxis[0].data = xData.value;
					option.value.series = ySeries.value;
					option.value.title.text = '人员年龄统计';

				}

				setTimeout(async () => {
					if (!chartRef.value) return
					const myChart = await chartRef.value.init(echarts)
					myChart.setOption(option.value)
				}, 300)


			}).catch((err) => {
				console.log(err);
			})
		}
		if (val == 1) {
			cxcRyDatacountByNlTotal(queryParm).then((res) => {
				if (res.success) {
					ryCountData.value = res.result
					xData.value = [];
					ySeries.value = [];
					legData.value = [];
					let serie = {
						name: '',
						type: 'bar',
						data: [],
						itemStyle: {
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: {
									//数值样式
									color: 'black',
									fontSize: 16
								}
							}
						}
					};


					let serie20 = JSON.parse(JSON.stringify(serie));
					serie20.name = '小于20岁';
					let serie21_30 = JSON.parse(JSON.stringify(serie));
					serie21_30.name = '21-30岁';
					let serie31_40 = JSON.parse(JSON.stringify(serie));
					serie31_40.name = '31-40岁';
					let serie41_50 = JSON.parse(JSON.stringify(serie));
					serie41_50.name = '41-50岁';
					let serie51_60 = JSON.parse(JSON.stringify(serie));
					serie51_60.name = '51-60岁';
					let serie45 = JSON.parse(JSON.stringify(serie));
					serie45.name = '45岁及以下';
					let serie46_60 = JSON.parse(JSON.stringify(serie));
					serie46_60.name = '45岁以上';
					let serie51_55 = JSON.parse(JSON.stringify(serie));
					serie51_55.name = '51-55岁';
					let serie55 = JSON.parse(JSON.stringify(serie));
					serie55.name = '55岁以上';
					let serietotal = JSON.parse(JSON.stringify(serie));
					serietotal.name = '总数';
					let serieavgage = JSON.parse(JSON.stringify(serie));
					serieavgage.name = '平均年龄';

					ryCountData.value.map(item => {
						xData.value.push("全厂");
						serietotal.data.push(item.total);
						serie20.data.push(item.age20);
						serie21_30.data.push(item.age21_30);
						serie31_40.data.push(item.age31_40);
						serie41_50.data.push(item.age41_50);
						serie51_60.data.push(item.age51_60);
						serie45.data.push(item.age45);
						serie46_60.data.push(item.age46_60);
						serie51_55.data.push(item.age51_55);
						serie55.data.push(item.age55);
						serieavgage.data.push(item.avgage);

					});
					this.ySeries.push(serietotal);
					this.ySeries.push(serieavgage);
					this.ySeries.push(serie20);
					this.ySeries.push(serie21_30);
					this.ySeries.push(serie31_40);
					this.ySeries.push(serie41_50);
					this.ySeries.push(serie51_60);
					this.ySeries.push(serie45);
					this.ySeries.push(serie46_60);
					this.ySeries.push(serie51_55);
					this.ySeries.push(serie55);

					legData.value = ['总数', '平均年龄', '小于20岁', '21-30岁', '31-40岁', '41-50岁', '51-60岁', '45岁及以下',
						'45岁以上', '51-55岁', '55岁以上'
					];


					option.value.legend.data = legData.value;
					option.value.xAxis[0].data = xData.value;
					option.value.series = ySeries.value;
					option.value.title.text = '人员年龄统计';

				}

				setTimeout(async () => {
					if (!chartRef.value) return
					const myChart = await chartRef.value.init(echarts)
					myChart.setOption(option.value)
				}, 300)


			}).catch((err) => {
				console.log(err);
			})
		}
	}
</script>

<style>
</style>