From 92d48433b86104043bcfbb3357d6eaa65674e6ea Mon Sep 17 00:00:00 2001
From: ldeyun <ldeyun@163.com>
Date: Mon, 15 Sep 2025 15:05:38 +0000
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20src/uni=5Fmodules/cxc-szcx?=
 =?UTF-8?q?-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-mul?=
 =?UTF-8?q?tiLineChart.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cxc-szcx-multiLineChart.vue               | 129 +++++-------------
 1 file changed, 35 insertions(+), 94 deletions(-)

diff --git a/src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue b/src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
index 67244a0..721ef79 100644
--- a/src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
+++ b/src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
@@ -1,21 +1,7 @@
-<route lang="json5" type="page">
-	{
-	layout: 'default',
-	style: {
-	navigationStyle: 'custom',
-	navigationBarTitleText: '历史数据图表',
-	},
-	}
-</route>
 <template>
-	<PageLayout :navbarShow="false">
-		<view>
-			<!-- ECharts图表 -->
-			<view class="chart-container">
-				<l-echart ref="chart" @finished="initChart" />
-			</view>
-		</view>
-	</PageLayout>
+	<view  >
+		<l-echart ref="chart" @finished="drawChart" />
+	</view>
 </template>
 
 <script setup>
@@ -75,7 +61,7 @@
 
 	// 1. 修复：生成图表配置（返回配置对象，供赋值给chartOption.value）
 	const generateOptions = () => {
-		console.log(23)
+		 
 		const serie = []; // 局部变量：存储系列配置
 		const yData = []; // 局部变量：存储Y轴配置
 		const xData = []; // 局部变量：存储X轴数据
@@ -114,7 +100,7 @@
 			const legendName = `${yFieldItem.name}(${yFieldItem.unit})`;
 			legendData.push(legendName);
 
-			console.log(1, legendData)
+			 
 
 			// 调整Y轴位置（ssll放左侧，其他放右侧）
 			if (yFieldItem.field === 'ssll') {
@@ -122,7 +108,7 @@
 				yaxisTemp.nameGap = -15;
 			} else {
 				yaxisTemp.position = 'right';
-				yaxisTemp.offset = 40 * positionIndex;
+				yaxisTemp.offset = 30 * positionIndex;
 				positionIndex++;
 			}
 
@@ -131,9 +117,10 @@
 			yaxisTemp.min = yFieldItem.min ?? 0; // 兜底：无min时设为0
 			yaxisTemp.max = yFieldItem.max ?? 100; // 兜底：无max时设为100
 			yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底
+			// yaxisTemp.show=false
 
 			yData.push(yaxisTemp);
-
+			 
 			// 系列配置模板
 			const serieTemp = {
 				field: yFieldItem.field,
@@ -149,6 +136,7 @@
 
 			// 修复this.serie.push错误：向局部变量seriepush
 			serie.push(serieTemp);
+			 
 		}
 
 		// 修复：返回完整配置对象
@@ -162,12 +150,13 @@
 				trigger: 'axis',
 				alwaysShowContent: true,
 				axisPointer: {
-					type: 'cross'
+					type: 'line',
+					show:false
 				}
 			},
 			toolbox: {
 				showTitle: true,
-				orient: 'vertical',
+				orient: 'horizontal',
 				feature: {
 					dataView: {
 						show: true,
@@ -180,19 +169,21 @@
 						show: true
 					}
 				},
-				left: '0%',
-				top: '10%'
+				right: '10%',
+				top: '0'
 			},
 			legend: {
 				data: legendData,
 				itemGap: 5,
 				padding: [35, 5, 25, 5],
-				type: 'scroll'
+				type: 'scroll', 
+				show:true
 			},
 			grid: {
-				top: '15%',
-				left: '5%',
-				right: `${10 + positionIndex * 10}%`, // 动态调整右侧间距（避免Y轴标签被截断）
+				width:'auto',
+				top: '20%',
+				left: '5px',
+				right: '5px', // 动态调整右侧间距（避免Y轴标签被截断）
 				bottom: 20,
 				containLabel: true
 			},
@@ -201,6 +192,7 @@
 				axisTick: {
 					alignWithLabel: true
 				},
+				show:true,
 				data: xData
 			},
 			yAxis: yData,
@@ -211,6 +203,7 @@
 	// 2. 修复：数据处理（正确访问响应式变量）
 	const processSeriesData = () => {
 		const ssData = props.dataList;
+		 
 		// 修复：访问chartOption.value的属性
 		const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据（避免直接修改）  series
 		const serie = [...chartOption.value.series]; // 拷贝原系列数据
@@ -236,9 +229,11 @@
 		});
 
 		// 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误）
-		serie.forEach((serieItem, mm) => {
+		serie.forEach((serieItem, mm) => {			
 			const maxValue = maxArrValue(serieItem.data);
-			yData[mm].max = Math.round(maxValue * 1.2) || 100; // 兜底：最大值为0时设为100
+			console.log(1,maxValue)
+			yData[mm].max = Math.round(maxValue * 12)/10 || 100; // 兜底：最大值为0时设为100
+			console.log(2,yData[mm].max)
 		});
 
 		// 修复：更新响应式数据（必须通过.value）
@@ -251,7 +246,7 @@
 			series: serie,
 			yAxis: yData
 		};
-		console.log(22, chartOption.value)
+		 
 	};
 
 	// 3. 修复：计算数组最大值（过滤NaN，避免排序错误）
@@ -271,11 +266,9 @@
 	watch(
 		() => props.dataList,
 		(newVal) => {
-			if (newVal.length === 0) return; // 空数据不处理
-			console.log(33, props.dataList)
-			console.log(44, props.yFields)
-			initChart()
-			updateChart();
+			if (newVal.length === 0) return; // 空数据不处理 
+			drawChart()
+
 		}, {
 			deep: true,
 			immediate: true
@@ -283,36 +276,24 @@
 	);
 
 	// 5. 修复：初始化图表（正确赋值chartOption.value）
-	const initChart = async () => {
+	const drawChart = async () => {
 		// 生成配置并赋值给响应式变量
 		chartOption.value = generateOptions();
+		processSeriesData()
 		if (!chart.value) return;
 
 		// 初始化ECharts实例（去掉setTimeout，用async/await更可靠）
 		const myChart = await chart.value.init(echarts);
 		myChart.setOption(chartOption.value);
-
-		// 窗口resize时重绘（优化体验）
-		window.addEventListener('resize', () => {
-			myChart.resize();
-		});
+ 
 	};
 
-	// 6. 修复：更新图表（正确访问chartOption.value）
-	const updateChart = () => {
-		if (!myChart.value || !chartOption.value) {
-			console.warn('ECharts实例未初始化！');
-			return;
-		}
 
-		processSeriesData();
-		myChart.value.setOption(chartOption.value, true);
-	};
 
 	// 生命周期：挂载时初始化
 	onMounted(() => {
 		setTimeout(() => {
-			initChart();
+			drawChart();
 		}, 500)
 
 	});
@@ -329,45 +310,5 @@
 </script>
 
 <style scoped>
-	.chart-container {
-		width: 100%;
-		height: 30vh;
-		min-height: 200px;
-		padding: 20rpx;
-		background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
-		border-radius: 16rpx;
-		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
-		position: relative;
-		overflow: hidden;
-	}
-
-	/* 加载占位符（数据为空时显示） */
-	.chart-container::before {
-		content: '数据加载中...';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		color: #666;
-		font-size: 28rpx;
-		z-index: 1;
-		/* 数据加载完成后隐藏 */
-		opacity: v-bind('chartOption.value.series?.length > 0 ? 0 : 1');
-	}
-
-	.chart-wrapper {
-		width: 100%;
-		height: 100%;
-		transition: opacity 0.3s ease;
-	}
-
-	/* 移动端优化：调整右侧间距（避免Y轴标签被截断） */
-	@media screen and (max-width: 768px) {
-		.chart-container {
-			height: 30vh;
-			min-height: 200px;
-			padding: 10rpx;
-			border-radius: 12rpx;
-		}
-	}
+	 
 </style>
\ No newline at end of file