zhgdlarge/src/views/sevenLargeScreen/greenConstruct/electricityMonitor/topRight.vue

<template>
	<Card title="昨日用电量">
		<div class="center-top">
			<div class="use-total">
				昨日总用电量:
				<span style="color: #65d7f9">{{ yesterdayUse }}</span>
				度
			</div>
			<div id="electricityTopRight" style="width: 100%; height: 100%"></div>
			<div class="not-data" v-if="xData.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { getElectricityUseRecord } from "@/api/modules/greenConstruct";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
import mitts from "@/utils/bus"; //兄弟组件传值

let yesterdayUse = ref(0 as any);
let xData = ref(["智能电表", "智能电表2", "智能电表3", "智能电表4", "智能电表5"] as any);
let yData = ref([100, 200, 300, 100, 20] as any);

function draw() {
	yesterdayUse.value = yData.value.reduce((acc: any, curr: any) => acc + curr, 0);
	let chartDom = document.getElementById("electricityTopRight");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let echartsTest = echarts.init(document.getElementById("electricityTopRight"));
	let option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
			},
			borderRadius: 5,
			borderWidth: 5,
			formatter: function (params) {
				let dot =
					'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
				return params[0].name + "<br>" + params[0].value;
			}
		},
		grid: {
			left: "4%",
			right: "4%",
			bottom: "5%",
			top: "15%",
			containLabel: true
		},
		xAxis: {
			show: true,
			data: xData.value,
			triggerEvent: true,
			axisTick: {
				show: false,
				lineStyle: {
					color: "red"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				rotate: 0,
				interval: 0,
				textStyle: {
					padding: [0, 0, 0, 0],
					fontSize: 12,
					color: "#fff"
				}
			}
		},
		yAxis: {
			triggerEvent: true,
			interval: 30,
			nameTextStyle: {
				color: "#fff",
				fontSize: 10,
				padding: [0, 0, 10, 0]
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#193c81"
				}
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: "#fff",
					fontSize: 12
				}
			}
		},
		// color: ["#e54035"],
		series: [
			{
				name: "数量",
				barMinHeight: 10,
				type: "pictorialBar",
				barCategoryGap: "5%",
				// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
				symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
				itemStyle: {
					normal: {
						//barBorderRadius: 5,
						//渐变色
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 1,
								color: "rgba(130, 251, 234, 0)"
							},
							{
								offset: 0,
								color: "rgba(130, 251, 234, 1)"
							}
						])
						// color: function (params) {
						// 	console.log(params, "颜色");
						// 	if (params.name === "智能电表2") {
						// 		return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						// 			{
						// 				offset: 1,
						// 				color: "rgba(238, 169, 89, 0)"
						// 			},
						// 			{
						// 				offset: 0,
						// 				color: "rgba(238, 169, 89, 1)"
						// 			}
						// 		]);
						// 	} else {
						// 		return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						// 			{
						// 				offset: 1,
						// 				color: "rgba(130, 251, 234, 0)"
						// 			},
						// 			{
						// 				offset: 0,
						// 				color: "rgba(130, 251, 234, 1)"
						// 			}
						// 		]);
						// 	}
						// }
					}
				},
				label: {
					normal: {
						show: true,
						position: "top",
						textStyle: {
							color: "#fff",
							fontSize: 12
						}
					}
				},
				data: yData.value,
				z: 10
			},
			{
				name: "hill",
				type: "line",
				color: "rgba(0,0,0,0)",
				symbol: `image://${symbolIcon}`,
				symbolSize: 20,
				itemStyle: {
					normal: {
						// color: "rgba(11,47,68,.8)"
					}
				},
				data: yData.value,
				z: 9
			}
		]
	};
	echartsTest.setOption(option);
}

const getYesterdayUseTotal = async () => {
	const res: any = await getElectricityUseRecord({ projectSn: store.sn, type: 1 });
	let nameArr = res.result instanceof Array ? res.result.map((item: any) => item.ammeterName) : [];
	let useArr = res.result instanceof Array ? res.result.map((item: any) => item.degree) : [];

	xData.value = nameArr;
	yData.value = useArr;
	// console.log("昨日用电量", nameArr, useArr);
	draw();
};

onMounted(() => {
	// mitts.on("electricId", e => {
	// 	console.log("昨日用电量接收到当前电表号", e);
	// 	getYesterdayUseTotal();
	// });
	// draw();
	getYesterdayUseTotal();
});

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

<style scoped lang="scss">
.center-top {
	width: 100%;
	height: 100%;
	position: relative;
	.use-total {
		position: absolute;
		top: 3%;
		left: 5%;
		font-size: 12px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #ffffff;
	}
}

.not-data {
	top: 40%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>