zhgdlarge/src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue

<template>
	<div class="blue-line-chart">
		<div :id="props.lineId" :ref="props.lineId" style="width: 100%; height: 100%"></div>
		<div class="not-data" v-if="props.xData.length == 0">
			<img src="@/assets/images/noData.png" alt="" />
			<p>暂无数据</p>
		</div>
	</div>
</template>

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

// ts
type Props = {
	xData?: any; // 传入x轴对应的数据
	yData?: any; // 传入y轴对应的数据
	lineId?: any; // 传入折线图dom元素对应的id
	lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑)
	grid?: any; //折线图的上下左右偏移量
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
	yData: [10, 5, 20, 25, 15, 25, 12],
	lineId: "waterShortTerm",
	lineSmooth: 0,
	grid: {
		top: "20%",
		left: "6%",
		right: "4%",
		bottom: "10%"
	}
	// num: () => [12, 13, 14] // 复杂数据类型使用函数方式
});

watch(
	() => props.xData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			drawChart();
		}
	}
);

// 图表数据项
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"
		},
		tooltip: {
			trigger: "axis"
		},
		grid: props.grid,
		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: props.xData
			}
		],

		yAxis: [
			{
				type: "value",
				// name: unit.value,
				nameTextStyle: {
					color: "#fff",
					nameLocation: "start"
				},
				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: [
			{
				type: "line",
				// smooth: true, //是否平滑
				showAllSymbol: true,
				symbol: `image://${symbolIcon}`,
				// symbol: "circle",
				smooth: props.lineSmooth,
				symbolSize: 30,
				label: {
					show: false,
					position: "top",
					textStyle: {
						color: "#fff"
					}
				},
				itemStyle: {
					color: "#97c6c8",
					borderColor: "#97c6c8",
					borderWidth: 5,
					shadowColor: "rgba(0, 0, 0, .6)",
					shadowBlur: 0,
					lineStyle: {
						width: 0.1,
						normal: {
							color: "#fff",
							shadowBlur: 0
						}
					}
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: "rgba(74, 192, 243,1)"
								},
								{
									offset: 0.9,
									color: "rgba(74, 192, 243,0.2)"
								},
								{
									offset: 1,
									color: "rgba(74, 192, 243, 0.1)"
								}
							],
							false
						),
						// shadowColor: "rgba(74, 192, 243, 0.1)",
						shadowBlur: 20
					}
				},
				data: props.yData
			}
		]
	};
}

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

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

<style lang="scss" scoped>
.blue-line-chart {
	width: 100%;
	height: 100%;
	position: relative;
	// transform: rotate(90deg);
}
.not-data {
	width: 20%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>