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

<template>
	<view>
		<uni-card>
			<uni-forms>
				<uni-forms-item>

				</uni-forms-item>
			</uni-forms>
			<uni-title title="所属单位 " align="center"></uni-title>

			<trq-depart-select returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>

			<uni-row>
				<uni-col :span="6"><button @click="getRyByxb(0)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">性别分组统计</button></uni-col>
				<uni-col :span="6"><button @click="getRyBynl(0)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">年龄分组统计</button></uni-col>
				<uni-col :span="6"><button @click="getRyByxb(1)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">性别总统计</button></uni-col>
				<uni-col :span="6"><button @click="getRyBynl(1)" type="primary" size="mini"
						style="margin: 10px 10px 10px 10px;">年龄总统计</button></uni-col>
			</uni-row>

			<view style="width:750rpx; height:750rpx"><l-echart ref="myChart" @finished="init"></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 ryCountData = ref([])
	const departID = ref("")
	const option = ref({
		notMerge: true,
		backgroundColor: '#F8FAFF',
		tooltip: {
			trigger: 'axis',
			showContent: this.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
		cxcRyDatacountByXb(queryParm).then((res) => {
			console.log(res);
			if (res.success) {
				xData.value = [];
				ySeries.value = [];
				legData.value = [];
				let serie = {
					name: '',
					type: 'bar',
					data: [],
					itemStyle: {
						normal: {
							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 = '女';
				ryData.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 = ['总数', '男', '女'];
				option.value.legend.data = legData.value;
				option.value.xAxis[0].data = xData.value;
				option.value.series = ySeries.value;
				option.value.title.text = bmText + '人员性别统计';

			}

			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
		cxcRyDatacountByNl(queryParm).then((res) => {
			console.log(res);
			if (res.success) {
				ryCountData.value = res.result.records
			}
		}).catch((err) => {
			console.log(err);
		})
	}
</script>

<style>
</style>