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

<template>
	<Card title="各配比产量（t）">
		<div class="load-top-left">
			<div>
				<div class="select-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>
			<div id="concreteEchartsBottomLeft" ref="concreteEchartsBottomLeft" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
// x轴
let twenty_four_time = ref([
	"00:00",
	"02:00",
	"04:00",
	"06:00",
	"08:00",
	"10:00",
	"12:00",
	"14:00",
	"16:00",
	"18:00",
	"20:00",
	"22:00",
	"24:00"
] as any);
// Y轴单位
let unit = ref("" as any);
// Y轴数据
let yData1 = ref([22, 22, 19, 23, 34, 33, 31, 22, 18, 19, 24, 29, 25] as any);
let yData2 = ref([12, 12, 10, 13, 20, 23, 21, 12, 13, 10, 13, 21, 17] as any);

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

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		title: {
			// text: '日用气量分析',
			textStyle: {
				align: "center",
				color: "#fff",
				fontSize: 20
			},
			top: "2%",
			left: "center"
		},
		legend:{
			icon: "rect",
			type: "plain",
			left: "5%",
			bottom: "92%",
			itemGap: 20,
			itemWidth: 10, // 设置宽度
			itemHeight: 10, // 设置高度
			textStyle: {
				color: "#fff",
				rich: {
					name: {
						width: 100,
						verticalAlign: "left",
						fontSize: 14,
						color: "#FFFFFF"
					},
					value: {
						width: 70,
						fontSize: 14,
						color: "#FFFFFF"
					}
				}
			},
		},
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 0.9)",
			borderColor: "#010306",
			textStyle: {
				color: "#FFFFFF"
			},
			axisPointer: {
				lineStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "rgba(0, 255, 233,0)"
							},
							{
								offset: 0.5,
								color: "rgba(255, 255, 255,1)"
							},
							{
								offset: 1,
								color: "rgba(0, 255, 233,0)"
							}
						],
						global: false
					}
				}
			}
			// formatter: function (params) {
			// 	// console.log("tooltip", params);
			// 	return (
			// 		params[0].name +
			// 		"<br/>" +
			// 		params[0].marker +
			// 		" " +
			// 		params[0].seriesName +
			// 		": " +
			// 		params[0].value +
			// 		"<br/>" +
			// 		params[1].marker +
			// 		" " +
			// 		params[1].seriesName +
			// 		": " +
			// 		params[1].value
			// 	);
			// }
		},
		grid: {
			top: "20%",
			left: "10%",
			right: "8%",
			bottom: "12%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff"
				},
				splitLine: {
					show: false
				},
				boundaryGap: false,
				data: twenty_four_time.value
			}
		],

		yAxis: [
			{
				name: unit.value,
				nameGap: 30,
				nameTextStyle: {
					align: "right", // 将 Y 轴名称文字右对齐
					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
					padding: [0, 15, 0, 0], // 设置名称文字的内边距，调整位置
					color: "#fff",
					nameLocation: "start"
				},
				type: "value",
				min: 0,
				// max: 140,
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLabel: {
					show: true,
					margin: 20,
					textStyle: {
						color: "#fff"
					}
				},
				axisTick: {
					show: true
				}
			}
		],
		series: [
			{
				showAllSymbol: true,
				symbol: `image://${symbolIcon2}`,
				// symbol: "circle",
				symbolSize: 8,
				smooth: true, //是否平滑
				name: "配比1",
				type: "line",
				color: "#4AC0F3",
				data: yData1.value
			},
			{
				showAllSymbol: true,
				symbol: `image://${symbolIcon}`,
				// symbol: "circle",
				symbolSize: 8,
				smooth: true, //是否平滑
				name: "配比2",
				type: "line",
				color: "#81F279",
				data: yData2.value
			}
		]
	};
}

function drawChart() {
	initOption();
	// console.log("绘制前数据", yData.value);
	let concreteEchartsBottomLeft = echarts.init(document.getElementById("concreteEchartsBottomLeft"));
	concreteEchartsBottomLeft.setOption(option.value);
}
onMounted(async () => {
	drawChart();
});

</script>

<style lang="scss" scoped>
.load-top-left {
	width: 100%;
	height: 100%;
	padding-left: 3%;
	padding-top: 3%;
	position: relative;
	.select-right {
	width: 40%;
	display: flex;
	position: absolute;
	z-index: 10;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	right: 2%;
	top: 5%;
	.selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		padding: 0 6%;
		margin-right: 5%;
		z-index: 99;
	}
	.week {
		padding: 0 6%;
		margin-right: 5%;
		z-index: 99;
	}
	.month {
		padding: 0 6%;
		z-index: 99;
	}
	.active {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
}

</style>