zhgdlarge/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/rightBottom.vue

<template>
	<div class="leftTop">
		<Card title="环境监测">
			<div class="box">
				<div id="echartsHjjc" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
				<div class="footerData">{{ analysisData }}</div>
				<div class="colour">
					<div class="colour_content">
						<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
						<div class="size">优</div>
					</div>
					<div class="colour_content">
						<div class="bg" style="background: #ffbb38"></div>
						<div class="size">良</div>
					</div>
					<div class="colour_content">
						<div class="bg" style="background: #fe7a18"></div>
						<div class="size">轻度污染</div>
					</div>
					<div class="colour_content">
						<div class="bg" style="background: #7718fe"></div>
						<div class="size">中度污染</div>
					</div>
					<div class="colour_content">
						<div class="bg" style="background: #890ea1"></div>
						<div class="size">重度污染</div>
					</div>
					<div class="colour_content">
						<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
						<div class="size">严重污染</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getCurrentDayAirQualityApi } from "@/api/modules/projectOverview";
import { ref, onMounted, reactive } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
const store = GlobalStore();
const analysisData = ref(10 as any);
const posCenter = ref(["50%", "64%"]);

function drawChart() {
	let leftTopEcharts = echarts.init(document.getElementById("echartsHjjc"));
	let option = {
		series: [
			{
				// 外围刻度
				type: "gauge",
				radius: "100%",
				center: posCenter.value,
				splitNumber: 10,
				min: 0,
				max: 500,
				startAngle: 180,
				endAngle: 0,
				axisLine: {
					show: true,
					lineStyle: {
						width: 18,
						shadowBlur: 0,
						color: [
							[
								1,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									// {
									// 	offset: 0,
									// 	color: "rgba(151, 12, 12, 1)"
									// },
									// {
									// 	offset: 0.2,
									// 	color: "rgba(137, 14, 161, 1)"
									// },
									// {
									// 	offset: 0.4,
									// 	color: "rgba(119, 24, 254, 1)"
									// },
									// {
									// 	offset: 0.5,
									// 	color: "rgba(254, 122, 24, 1)"
									// },
									// {
									// 	offset: 0.8,
									// 	color: "rgba(255, 187, 56, 1)"
									// },
									// {
									// 	offset: 1,
									// 	color: "rgba(101, 215, 249, 1)"
									// }
									{
										offset: 0,
										color: "rgba(101, 215, 249, 1)"
									},
									{
										offset: 0.2,
										color: "rgba(255, 187, 56, 1)"
									},
									{
										offset: 0.4,
										color: "rgba(254, 122, 24, 1)"
									},
									{
										offset: 0.5,
										color: "rgba(119, 24, 254, 1)"
									},
									{
										offset: 0.8,
										color: "rgba(137, 14, 161, 1)"
									},
									{
										offset: 1,
										color: "rgba(151, 12, 12, 1)"
									}
								])
							]
						]
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: true,
					color: "#fff",
					fontSize: 10,
					distance: -40
				},
				pointer: {
					show: 0
				}
			},
			{
				// 内侧指针、数值显示
				name: "",
				type: "gauge",
				radius: "95%",
				center: posCenter.value,
				startAngle: 180,
				endAngle: 0,
				min: 0, //最小刻度
				max: 500, //最大刻度
				splitNumber: 100, //刻度数量
				axisLine: {
					show: false
				},
				axisLabel: {
					show: false
				}, //刻度标签。
				axisTick: {
					show: false
				}, //刻度样式
				splitLine: {
					show: true,
					length: 5,
					lineStyle: {
						color: "#87E0FB",
						width: 1
					}
				},
				detail: {
					show: false
				},
				itemStyle: {
					normal: {
						color: "#fff"
					}
				},
				data: [
					{
						value: analysisData.value
					}
				],
				z: 9
			},
			// 第三个圆
			{
				type: "gauge",
				radius: "70%",
				center: posCenter.value,
				splitNumber: 4,
				min: 0,
				max: 100,
				startAngle: 180,
				endAngle: 0,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						shadowBlur: 0,
						color: [
							[
								1,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "rgb(1,192,229)"
									},
									{
										offset: 1,
										color: "#87E0FB "
									}
								])
							]
						]
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			// 第二个圆
			{
				type: "gauge",
				radius: "45%",
				center: posCenter.value,
				splitNumber: 4,
				min: 0,
				max: 100,
				startAngle: 180,
				endAngle: 0,
				axisLine: {
					show: true,
					lineStyle: {
						width: 2,
						shadowBlur: 0,
						color: [
							[
								1,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0,
										color: "rgb(1,192,229)"
									},
									{
										offset: 1,
										color: "#87E0FB "
									}
								])
							]
						]
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			// 第一个圆
			{
				type: "gauge",
				radius: "25%",
				center: posCenter.value,
				splitNumber: 4,
				min: 0,
				max: 100,
				startAngle: 180,
				endAngle: 0,

				axisLine: {
					show: true,
					lineStyle: {
						width: 200,
						shadowBlur: 0,
						color: [
							[
								1,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 1,
										color: "rgba(135, 224, 251, 0.2)"
									},
									{
										offset: 0.2,
										color: "rgba(135, 224, 251, 0.7)"
									}
								])
							],
							[1, "transparent"]
						]
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				pointer: {
					show: 0
				},
				detail: {
					show: 0
				}
			},
			{
				type: "gauge",
				radius: "70%",
				center: posCenter.value,
				splitNumber: 0, //刻度数量
				startAngle: 180,
				endAngle: 0,

				axisLine: {
					show: true,
					lineStyle: {
						width: 26,
						color: [
							[
								analysisData.value / 500,
								new echarts.graphic.LinearGradient(0, 0, 1, 0, [
									{
										offset: 0.5,
										color: "rgba(135, 224, 251, 1)"
									},
									{
										offset: 1,
										color: "#fff"
									}
								])
							],
							[1, "transparent"]
						]
					}
				},
				//分隔线样式。
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				axisTick: {
					show: false
				},
				pointer: {
					show: false
				},
				title: {
					show: false
				},
				//仪表盘详情，用于显示数据。
				detail: {
					show: false
				},
				data: [
					{
						value: analysisData.value,
						itemStyle: {
							color: "red"
						}
					}
				]
			},
			{
				//指针外环
				type: "pie",
				hoverAnimation: false,
				legendHoverLink: false,
				center: posCenter.value,
				radius: ["8%", "6%"],
				// width:5,
				z: 10,
				label: {
					normal: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				data: [
					{
						value: analysisData.value,
						itemStyle: {
							normal: {
								color: "#87E0FB"
							}
						}
					}
				]
			},
			{
				//指针内环
				type: "pie",
				hoverAnimation: false,
				legendHoverLink: false,
				center: posCenter.value,
				radius: ["-2%", "4%"],
				z: 10,

				axisLine: {
					show: true
				},
				label: {
					normal: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					}
				},

				data: [
					{
						value: analysisData.value,
						itemStyle: {
							normal: {
								color: "rgba(7, 31, 60) "
							}
						}
					}
				]
			}
		]
	};
	leftTopEcharts.setOption(option);
	// window.addEventListener("resize", () => {
	// 	console.log(666)
	// 	leftTopEcharts.resize();
	// })
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}
//获取环境监测数据
const getList = async () => {
	const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
	console.log("获取环境监测数据", res);
	if (res.result) {
		analysisData.value = res.result.analysisData;
	}
	drawChart();
};
//将方法暴露给父组件
defineExpose({
	getList
})
onMounted( async () => {
	getList();
	// drawChart();
});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
}
.box {
	width: 100%;
	height: 100%;
	position: relative;
}
.footerData {
	position: absolute;
	top: 69%;
	left: 48%;
	font-family: sadigitalNumber;
	font-size: 14px;
	color: #fff;
}
.colour {
	position: absolute;
	bottom: 0;
	width: 100%;
	font-size: 10px;
	left: 8%;
	top: 80%;
	color: #fff;

	.colour_content {
		width: 14%;
		text-align: center;
		float: left;

		.bg {
			width: 100%;
			height: 8px;
			margin-bottom: 10px;
		}

		.size {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>