carDetectionReport/components/lineOne.vue

<template>
	<view style="width:100%; height:450rpx">
		<l-echart ref="chartRef" :id="id"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		name: "lineOne",
		props: {
			apiData: {
				type: Object, // 定义 props 类型
				default: null // 默认值
			},
			lineType: {
				type: String,
				default: ''
			},
			id: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		watch: {
			// 监听 message 的变化
			apiData(val) {
				// console.log('父组件传递的值发生变化：', val);
				this.init(val);
			},
			deep: true
		},
		mounted() {},
		methods: {
			async init(data) {
				let XData
				let valueData
				let unitMap = {
					yName: '',
					name1: '',
				}
				if (this.lineType == '充电温差') {
					const formattedData = data.tempDiffTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.tempDiffValue,
					};
					unitMap.yName = '温度：℃'
					unitMap.name1 = '充电温差'
				} else if (this.lineType == '最高温度历史') {
					const formattedData = data.hstTempMaxTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstTempMaxValue,
					};
					unitMap.yName = '温度：℃'
					unitMap.name1 = '最高温度历史'
				} else if (this.lineType == '温差历史') {
					const formattedData = data.hstTempDiffTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstTempDiffValue,
					};
					unitMap.yName = '温度：℃'
					unitMap.name1 = '温差历史'
				} else if (this.lineType == '最高单体电压历史') {
					const formattedData = data.hstVoltMaxTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstVoltMaxValue,
					};
					unitMap.yName = 'V'
					unitMap.name1 = '最高单体电压历史'
				} else if (this.lineType == '压差历史') {
					const formattedData = data.hstVoltDiffTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstVoltDiffValue,
					};
					unitMap.yName = 'V'
					unitMap.name1 = '压差历史'
				} else if (this.lineType == '温度一致性历史') {
					const formattedData = data.hstTempConsistencyTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstTempConsistencyValue,
					};
					unitMap.yName = '分'
					unitMap.name1 = '温度一致性历史'
				} else if (this.lineType == '开路电压一致性历史') {
					const formattedData = data.hstVoltConsistencyTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstVoltConsistencyValue,
					};
					unitMap.yName = '分'
					unitMap.name1 = '开路电压一致性历史'
				} else if (this.lineType == '健康度历史') {
					const formattedData = data.hstSohTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.hstSohValue,
					};
					unitMap.yName = '%'
					unitMap.name1 = '健康度历史'
				} else if (this.lineType == '充电功率') {
					const formattedData = data.powerTime.map(dateStr =>
						dateStr.replace(/\s/, '\n')
					);
					XData = formattedData
					valueData = {
						data1: data.powerValue,
					};
					// XData = ['2025', '2024', '2023']
					// valueData = {
					// 	data1: ['1', '2', '3', '4'],
					// };
					unitMap.yName = '单位：kW'
					unitMap.name1 = '充电功率'
				}

				let option = {
					tooltip: {
						trigger: "axis",
					},
					legend: {
						x: "right",
						textStyle: {
							color: "#fff"
						},
					},
					grid: {
						top: "15%",
						left: "1%",
						right: "3%",
						bottom: this.lineType == '充电功率' ? "10%" : "3%",
						containLabel: true,
					},
					xAxis: {
						// name: "充电时间",
						// nameLocation: 'end',
						// nameTextStyle: {
						// 	color: 'rgb(127,127,127)', // 名称颜色
						// 	fontSize: 9, // 名称字体大小
						// 	fontWeight: 'bold' // 名称字体加粗
						// },
						type: "category",
						data: XData,
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: "#88A9CD",
							},
						},
						axisLabel: {
							textStyle: {
								color: "#88A9CD",
							},
						},
					},
					yAxis: [{
						name: unitMap.yName,
						type: "value",
						nameTextStyle: {
							padding: this.lineType == '充电功率' ? [0, 0, 0, 15] : [0, 0, 0, 0],
						},
						axisLabel: {
							textStyle: {
								color: "#88A9CD",
							},
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#88A9CD",
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "#88A9CD",
							},
						},
					}, ],
					series: [{
						name: unitMap.name1,
						type: "line",
						data: valueData.data1,
						symbolSize: 2, //标记的大小
						symbol: "circle",
						lineStyle: {
							width: 2,
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: "#28B4FF",
								},
								{
									offset: 1,
									color: "#3CFDFF",
								},
							]),
							shadowColor: "rgba(158,135,255, 0.3)",
							// shadowBlur: 10,
							// shadowOffsetY: 20,
						},
						itemStyle: {
							normal: {
								color: "#28B4FF",
							},
						},
						smooth: true,
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(108,80,243,0.3)'
									},
									{
										offset: 1,
										color: 'rgba(108,80,243,0)'
									}
								], false),
								shadowColor: '#28B4FF',
								shadowBlur: 20
							}
						},
					}, ],
				};
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				// 监听窗口大小改变事件，并调用resize方法
				window.onresize = function() {
					myChart.resize();
				};
			}
		}
	}
</script>

<style lang="less">

</style>