zhgdlarge/src/views/sevenLargeScreen/headNoise/rightTop.vue

<template>
	<Card title="空气分析">
		<div class="rightHeader">
			<div
				class="day"
				:class="airType == 1 ? 'Selected' : ''"
				@click="
					airType = 1;
					getAirQualityStatistics();
				"
			>
				最近30天
			</div>
			<div
				class="year"
				:class="airType == 2 ? 'Selected' : ''"
				@click="
					airType = 2;
					getAirQualityStatistics();
				"
			>
				最近3一年
			</div>
		</div>
		<div id="rightEcharts" ref="rightEcharts" style="width: 100%; height: 100%"></div>
	</Card>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import Card from "@/components/card.vue";
const store = GlobalStore();
const airType = ref(1);
const airTypeEchart = ref([]);
const airTypeData = ref([]);
const option = reactive({
	grid: {
		left: "5%",
		right: "5%",
		bottom: "-8%",
		top: "15%",
		containLabel: true
	},
	// backgroundColor: '#101129',
	xAxis: {
		show: false,
		type: "value",
		max: 100
	},
	yAxis: [
		{
			type: "category",
			inverse: true,
			axisLabel: {
				show: true,
				textStyle: {
					fontSize: "14",
					color: "#fff"
				}
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: airTypeEchart.value
		},
		{
			axisTick: "none",
			axisLine: "none",
			axisLabel: {
				textStyle: {
					color: "#fff",
					fontSize: "12"
				}
			},
			data: airTypeData.value
		},
		{
			type: "category",
			inverse: true,
			axisTick: "none",
			axisLine: "none",
			show: true,
			data: airTypeData.value
		}
	],
	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: "#194077"
						},
						{
							offset: 1,
							color: "#4CC4F8"
						}
					])
				}
			},
			barWidth: 3,
			data: airTypeData.value
		},
		{
			name: "内圆",
			type: "scatter",
			stack: "圆",
			yAxisIndex: 0,
			data: airTypeData.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: "#4CC4F8",
					borderWidth: 2,
					color: "#14346c",
					opacity: 1
				}
			},
			z: 2
		}
	]
});
function rightChart() {
	let rightEcharts = echarts.init(document.getElementById("rightEcharts"));
	rightEcharts.setOption(option);
	// window.onresize = function () {
	//   myEchart.resize();
	// }
}

//获取空气分析
const getAirQualityStatistics = async () => {
	const res = await getAirQualityStatisticsApi({
		type: airType.value,
		projectSn: store.sn
	});
	// console.log("倒叙前的", res.result);
	// let data = res.result;
	// data.sort();
	// console.log("data倒叙后的", data);
	if (res.result) {
		for (let index = 0; index < res.result.length; index++) {
			airTypeEchart.value[index] = res.result[index].type;
			airTypeData.value[index] = res.result[index].num;
		}

		rightChart();
	}
};
onMounted(async () => {
	getAirQualityStatistics();
});
</script>

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