zhgdlarge/src/views/sevenLargeScreen/laborManagement/horizontaL.vue

<template>
	<div class="box">
		<div class="title">
			<span style="background: #82fbea; display: block; width: 10px; height: 10px; margin-top: 3%; margin-right: 8%"></span>
			<span>人员分布</span>
		</div>
		<div class="time">
			<el-date-picker
				v-model="form.createTime"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				value-format="YYYY-MM-DD"
			/>
		</div>
		<div id="horizontalEcharts" ref="horizontalEcharts" style="width: 100%; height: 100%"></div>
	</div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import mitts from "@/utils/bus"; //兄弟组件传值
import { GlobalStore } from "@/stores";
import { getWorkerInfoApi } from "@/api/modules/labor";
const store = GlobalStore();
const form = ref({
	createTime: "",
	queryStartTime: "",
	queryEndTime: ""
});
let xData = ref([]);
let yData = ref([]);
const option = reactive({
	grid: {
		left: "5%",
		right: "5%",
		bottom: "3%",
		top: "18%",
		containLabel: true
	},
	// backgroundColor: "#101129",
	xAxis: {
		show: true,
		type: "value",
		max: 100,
		axisLabel: {
			show: true,
			textStyle: {
				fontSize: "12",
				color: "#fff"
			}
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: "#14336b"
			}
		},
		splitLine: {
			show: false,
			lineStyle: {
				color: "#14336b"
			}
		}
	},
	yAxis: [
		{
			type: "category",
			inverse: true,
			axisLabel: {
				show: true,
				textStyle: {
					fontSize: "12",
					color: "#fff"
				}
			},

			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: "#14336b"
				}
			},
			data: yData.value
		},
		{
			axisTick: "none",
			axisLine: "none",
			axisLabel: {
				textStyle: {
					color: "#fff",
					fontSize: "12"
				}
			},
			data: []
		},
		{
			type: "category",
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			show: true
			// data: [],
		}
	],
	series: [
		{
			type: "bar",
			showBackground: true,
			backgroundStyle: {
				color: "#14346c",
				borderRadius: 30
			},
			label: {
				show: false,
				// position:'right',
				// formatter:'{@score}%',
				textStyle: {
					color: "#03fcfe",
					fontSize: "12"
				}
			},
			itemStyle: {
				normal: {
					barBorderRadius: 10,
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
						{
							offset: 0,
							color: "#1d465c"
						},
						{
							offset: 1,
							color: "#82FBEA"
						}
					])
				}
			},
			barWidth: 3,
			data: xData.value
		},
		{
			name: "内圆",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: xData.value, //小白点，数据静态
			label: false,
			symbolSize: 2,
			itemStyle: {
				normal: {
					borderColor: "#fff",
					borderWidth: 4,
					color: "#fff",
					opacity: 1
				}
			},
			z: 3
		},
		{
			name: "内圆框",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
			label: false,
			symbolSize: 15,
			itemStyle: {
				normal: {
					borderColor: "#82FBEA",
					borderWidth: 2,
					color: "#14346c",
					opacity: 1
				}
			},
			z: 2
		}
	]
});
function horizontalChart() {
	let horizontalEcharts = echarts.init(document.getElementById("horizontalEcharts"));
	horizontalEcharts.setOption(option);
}
// //选择日期
// const onDatePicker = () => {
// 	console.log("createTime---", createTime);
// 	form.value.queryStartTime = form.value.createTime[0];
// 	form.value.queryEndTime = form.value.createTime[1];
// };
//获取劳务班组人员数据
const getList = async val => {
	const res = await getWorkerInfoApi({
		projectSn: store.sn,
		enterpriseId: val
		// queryStartTime: form.queryStartTime.value,
		// queryEndTime: form.queryEndTime.value
	});
	if (res.result) {
		for (let index = 0; index < res.result.length; index++) {
			xData.value[index] = res.result[index].totalPersonNum;
			yData.value[index] = res.result[index].enterpriseName;
		}
	}
	console.log("获取劳务班组人员数据", res);
	horizontalChart();
};
onMounted(async () => {
	mitts.on("enterpriseId", e => {
		getList(e);
	});
});
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	position: relative;
	.title {
		position: absolute;
		display: flex;
		color: #fff;
		font-size: 14px;
		margin: 2% 0 0 2%;
		width: 30%;
	}

	.time {
		width: 47%;
		position: absolute;
		z-index: 999;
		left: 54%;
		margin-top: 2%;
	}
}
</style>