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

<template>
	<Card title="按分包单位分析">
		<div class="rightHeader">
			<div class="day Selected">实时</div>
			<div class="year Selected">今日</div>
		</div>
		<div id="echartsBottom" style="width: 100%; height: 100%"></div>
	</Card>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";

import Card from "@/components/card.vue";

export default {
	components: {
		Card
	},
	setup() {
		const labelimg = ref(new URL("@/assets/images/larborManagement/greenX.png", import.meta.url).href);
		const labelimg2 = ref(new URL("@/assets/images/larborManagement/orangeX.png", import.meta.url).href);
		const option = reactive({
			grid: {
				left: "10%",
				top: "25%",
				right: "3%",
				bottom: "12%"
			},
			// "legend": {
			//     "data": [
			//         "信息",
			//         "往下场所",
			//         "关系",
			//         "关联",
			//         "人",
			//         "物",
			//         "组织"
			//     ],
			//     "top": "92%",
			//     "icon": "circle",
			//     "textStyle": {
			//         "color": "#0DCAD2"
			//     }
			// },
			color: ["#A3EAFF", "#ECD64F", "#00E4F0", "#44D16D"],
			tooltip: {
				position: "top"
			},
			xAxis: {
				data: ["XX有限公司", "XX有限公司", "XX有限公司", "XX有限公司"],
				triggerEvent: true,
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: true,
					rotate: 0,
					interval: 0,
					textStyle: {
						// padding: [14, 0, 0, 0],
						fontSize: 12,
						color: "#fff"
					}
				}
			},
			yAxis: {
				name: "单位：人数",
				triggerEvent: true,
				nameTextStyle: {
					color: "#fff",
					fontSize: 12
					// padding: [0, 0, 10, -20]
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#14346c"
					}
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346c"
					}
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: "#fff",
						fontSize: 12
					}
				}
			},
			series: [
				{
					name: "XX有限公司",
					data: [0, 0, 0, 0, 0, 0, 0],
					stack: "a",
					type: "bar"
				},
				{
					name: "XX有限公司",
					data: [0, 0, 0, 0, 0, 0, 0],
					stack: "a",
					type: "bar"
				},
				{
					name: "XX有限公司",
					data: [0, 0, 0, 0, 0, 0, 0],
					stack: "a",
					type: "bar"
				},
				{
					name: "XX有限公司",
					data: [0, 0, 0, 0, 0, 0, 0],
					stack: "a",
					type: "bar"
				},

				{
					type: "pictorialBar",
					name: "提示框值",
					data: [
						{
							name: "",
							value: 100,
							label: {
								show: true,
								position: "top",
								formatter: function (params) {
									var index = params.dataIndex;
									var str = "{c|}";
									return str;
								},
								rich: {
									c: {
										fontSize: 18,
										color: "#fff",
										padding: [2, 0, 2, 0],
										backgroundColor: {
											image: labelimg
										},
										align: "center",
										// verticalAlign: "bottom",
										height: 25,
										lineHeight: 0,
										width: 25
									}
								}
							},
							itemStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: "rgba(199, 250, 242)"
											},
											{
												offset: 1,
												color: "rgba(76, 153, 154,0.5)"
											}
										],
										global: false
									}
								}
							}
						},
						{
							name: "",
							value: 106,
							label: {
								show: true,
								position: "top",
								formatter: function (params) {
									var index = params.dataIndex;
									var str = "{c|}";
									return str;
								},
								rich: {
									c: {
										fontSize: 18,
										color: "#fff",
										padding: [-4, 0, 8, 0],
										backgroundColor: {
											image: labelimg
										},
										align: "center",
										// verticalAlign: "bottom",
										height: 25,
										lineHeight: 0,
										width: 25
									}
								}
							},
							itemStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: "rgba(199, 250, 242)"
											},
											{
												offset: 1,
												color: "rgba(76, 153, 154,0.5)"
											}
										],
										global: false
									}
								}
							}
						},
						{
							name: "",
							value: 162,
							label: {
								show: true,
								position: "top",
								formatter: function (params) {
									var index = params.dataIndex;
									var str = "{c|}";
									return str;
								},
								rich: {
									c: {
										fontSize: 18,
										color: "#fff",
										padding: [-4, 0, 8, 0],
										backgroundColor: {
											image: labelimg2
										},
										align: "center",
										// verticalAlign: "bottom",
										height: 25,
										lineHeight: 0,
										width: 25
									}
								}
							},
							itemStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: "rgba(238, 169, 89, 0.9)"
											},
											{
												offset: 1,
												color: "rgba(238, 169, 89, 0.5)"
											}
										],
										global: false
									}
								}
							}
						},
						{
							name: "",
							value: 120,
							label: {
								show: true,
								formatter: function (params) {
									var index = params.dataIndex;
									var str = "{c|}";
									return str;
								},
								position: "top",
								rich: {
									c: {
										fontSize: 18,
										color: "#fff",
										padding: [-4, 0, 8, 0],
										backgroundColor: {
											image: labelimg
										},
										align: "center",
										// verticalAlign: "bottom",
										height: 25,
										lineHeight: 0,
										width: 25
									}
								}
							},
							itemStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: "rgba(199, 250, 242)"
											},
											{
												offset: 1,
												color: "rgba(76, 153, 154,0.5)"
											}
										],
										global: false
									}
								}
							}
						}
					],
					stack: "a",
					symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
				}
			]
		});
		function draw() {
			let echartsTest = echarts.init(document.getElementById("echartsBottom"));
			echartsTest.setOption(option);
		}
		onMounted(async () => {
			draw();
		});
	}
};
</script>

<style lang="scss" scoped>
.rightHeader {
	width: 20%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	left: 80%;
	top: 75.5%;
	.Selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		width: 15%;
		margin-right: 5%;
		margin-left: 55%;
	}
	.year {
		width: 15%;
		margin-right: 8%;
	}
	.Selected:hover {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
</style>