zhgdlarge/src/views/sevenLargeScreen/largeMachinery/universalTestMachine/bottomLeft.vue

<template>
	<Card title="累计试验次数">
		<div class="load-bottom-left">
			<div class="choice-right">
				<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">今日</div>
				<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近7日</div>
				<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近30日</div>
			</div>
			<div class="load-content">
				<div id="universalHistogram" ref="universalHistogram" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
// import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";

import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
// import { getSelectDataListApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
// let twenty_four_time = ref([] as any);
// Y轴单位
let unit = ref("" as any);
// Y轴数据
// let yData1 = ref([
// 	["2023-9-19 05:15:00", 12],
// 	["2023-9-19 15:15:00", 200],
// 	["2023-9-19 17:15:00", 50],
// 	["2023-9-19 19:15:00", 24],
// 	["2023-9-20 05:15:00", 30],
// 	["2023-9-20 15:15:00", 60]
// ]);

// 图表数据项
let option = ref(null as any);

// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	drawChart();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	drawChart();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	drawChart();
}

let typeList = ref([
	{
		value: 1,
		dayType: "最低值",
		typeUnit: "℃"
	},
	{
		value: 2,
		dayType: "最高值",
		typeUnit: "℃"
	}
]);

function selectChange(e: any) {
	console.log("当前日期", e);
	drawChart();
}

function initOption() {
	option.value = {
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 0.9)",
			borderColor: "#010306",
			textStyle: {
				color: "#FFFFFF"
			}
		},
		grid: {
			left: "2%",
			right: "4%",
			bottom: "5%",
			top: "16%",
			containLabel: true
		},
		legend: {
			left: 10,
			top: 12,
			itemGap: 25,
			textStyle: {
				color: "#fff",
				padding: [0, 0, 0, 15]
			},
			itemWidth: 12,
			itemHeight: 10
		},
		xAxis: {
			type: "category",
			data: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00"],
			axisLine: {
				lineStyle: {
					color: "white"
				}
			},
			axisLabel: {
				textStyle: {
					fontFamily: "Microsoft YaHei"
				}
			}
		},

		yAxis: {
			type: "value",
			max: "600",
			axisLine: {
				show: false,
				lineStyle: {
					color: "white"
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,0.3)"
				}
			},
			axisLabel: {}
		},
		series: [
			{
				name: "试验次数",
				type: "bar",
				barWidth: "20%",
				barGap: "70%", // 设置相邻柱子之间的间隔为 10%
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "#3368F3"
							},
							{
								offset: 1,
								color: "#82FBEA"
							}
						])
					}
				},
				data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
			},
			{
				name: "报告上传次数",
				type: "bar",
				barWidth: "20%",
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "#81F279"
							},
							{
								offset: 1,
								color: "#C9FA86"
							}
						])
					}
				},
				data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
			}
		]
	};
}

function drawChart() {
	initOption();
	// console.log("绘制前数据", option.value);
	let chartDom = document.getElementById("universalHistogram");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let universalHistogram = echarts.init(document.getElementById("universalHistogram"));
	universalHistogram.setOption(option.value);
}

onMounted(async () => {
	drawChart();
});

// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

<style lang="scss" scoped>
.load-bottom-left {
	width: 100%;
	height: 100%;
	position: relative;
	.load-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
}

.choice-right {
	width: 40%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	right: -5%;
	top: 5%;
	.selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		padding: 0 5%;
		margin-right: 4%;
		z-index: 99;
	}
	.week {
		padding: 0 5%;
		margin-right: 4%;
		z-index: 99;
	}
	.month {
		padding: 0 5%;
		z-index: 99;
	}
	.active {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}

:deep(.el-input__wrapper) {
	background: #112d59;
}
:deep(.el-input__inner) {
	color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}
:deep(.el-date-editor) {
	width: 100%;
}
:deep(.el-range-separator) {
	color: #fff;
}
:deep(.el-date-editor .el-range-input) {
	color: #fff;
}
</style>