对接劳务班组出勤分析，右侧图

src/views/sevenLargeScreen/laborManagement/horizontaL.vue

@@ -32,43 +32,22 @@ const form = ref({
 });
 let xData = ref([] as any);
 let yData = ref([] as any);
-const option = reactive({
+let option = ref(null as any);
-	grid: {
+
-		left: "5%",
+function initOption() {
-		right: "5%",
+	option.value = {
-		bottom: "3%",
+		grid: {
-		top: "18%",
+			left: "5%",
-		containLabel: true
+			right: "5%",
-	},
+			bottom: "3%",
-	// backgroundColor: "#101129",
+			top: "18%",
-	xAxis: {
+			containLabel: true
-		show: true,
-		type: "value",
-		max: 100,
-		axisLabel: {
-			show: true,
-			textStyle: {
-				fontSize: "12",
-				color: "#fff"
-			}
 		},
-		axisLine: {
+		// backgroundColor: "#101129",
+		xAxis: {
 			show: true,
-			lineStyle: {
+			type: "value",
-				color: "#14336b"
+			max: 100,
-			}
-		},
-		splitLine: {
-			show: false,
-			lineStyle: {
-				color: "#14336b"
-			}
-		}
-	},
-	yAxis: [
-		{
-			type: "category",
-			inverse: true,
 			axisLabel: {
 				show: true,
 				textStyle: {
@@ -76,113 +55,141 @@ const option = reactive({
 					color: "#fff"
 				}
 			},
-
-			axisTick: {
-				show: false
-			},
 			axisLine: {
+				show: true,
 				lineStyle: {
 					color: "#14336b"
 				}
 			},
-			data: yData.value
+			splitLine: {
-		},
-		{
-			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',
+				lineStyle: {
-				// formatter:'{@score}%',
+					color: "#14336b"
-				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
 		},
-		{
+		yAxis: [
-			name: "内圆",
+			{
-			type: "scatter",
+				type: "category",
-			stack: "圆",
+				inverse: true,
-			yAxisIndex: 0,
+				axisLabel: {
-			data: xData.value, //小白点，数据静态
+					show: true,
-			label: false,
+					textStyle: {
-			symbolSize: 2,
+						fontSize: "12",
-			itemStyle: {
+						color: "#fff"
-				normal: {
+					}
-					borderColor: "#fff",
+				},
-					borderWidth: 4,
+
-					color: "#fff",
+				axisTick: {
-					opacity: 1
+					show: false
-				}
+				},
+				axisLine: {
+					lineStyle: {
+						color: "#14336b"
+					}
+				},
+				data: yData.value
 			},
-			z: 3
+			{
-		},
+				axisTick: "none",
-		{
+				axisLine: "none",
-			name: "内圆框",
+				axisLabel: {
-			type: "scatter",
+					textStyle: {
-			stack: "圆",
+						color: "#fff",
-			yAxisIndex: 0,
+						fontSize: "12"
-			data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
+					}
-			label: false,
+				},
-			symbolSize: 15,
+				data: []
-			itemStyle: {
+			},
-				normal: {
+			{
-					borderColor: "#82FBEA",
+				type: "category",
-					borderWidth: 2,
+				inverse: true,
+				axisTick: "none",
+				axisLine: "none",
+				show: true
+				// data: [],
+			}
+		],
+		series: [
+			{
+				type: "bar",
+				showBackground: true,
+				backgroundStyle: {
 					color: "#14346c",
-					opacity: 1
+					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
 			},
-			z: 2
+			{
-		}
+				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
+			}
+		]
+	};
+}
+// let horizontalEcharts: any = null;
 function horizontalChart() {
+	initOption();
 	let horizontalEcharts = echarts.init(document.getElementById("horizontalEcharts"));
-	horizontalEcharts.setOption(option);
+	console.log(option.value, "绘图数据");
+	horizontalEcharts.setOption(option.value);
 }
 // //选择日期
 // const onDatePicker = () => {
@@ -192,27 +199,33 @@ function horizontalChart() {
 // };
 //获取劳务班组人员数据
 const getList = async val => {
+	// 清数据
 	const res: any = await getWorkerInfoApi({
 		projectSn: store.sn,
 		enterpriseId: val
 		// queryStartTime: form.queryStartTime.value,
 		// queryEndTime: form.queryEndTime.value
 	});
-	if (res.result[0]) {
+	// console.log(res.result.length,'长度')
+	if (res.result.length != 0) {
 		for (let index = 0; index < res.result.length; index++) {
 			xData.value[index] = res.result[index].totalPersonNum;
 			yData.value[index] = res.result[index].teamName;
 		}
 	} else {
+		console.log("没有数据");
 		xData.value = [];
 		yData.value = [];
 	}
-	console.log("获取劳务班组人员数据2", res);
+	// console.log("获取劳务班组人员数据2", res);
 	horizontalChart();
 };
 onMounted(async () => {
 	mitts.on("enterpriseId", e => {
+		// horizontalEcharts = echarts.init(document.getElementById('chart-view'))
 		// 清数据
+		xData.value = [];
+		yData.value = [];
 		getList(e);
 	});
 });