K线图无法滑动

src/views/Echarts/KLine.vue

@@ -1,5 +1,9 @@
 <template>
-	<div ref="chartContainer" class="KlineClass"></div>
+	<div ref="chartContainer" class="KlineClass">
+		<div v-if="!hasValidData" class="no-data-message">
+			<p>暂无K线数据</p>
+		</div>
+	</div>
 </template>
 
 <script setup>
@@ -17,87 +21,166 @@ const props = defineProps({
 
 const chartContainer = ref() // 容器引用
 const chartInstance = ref(null) // 当前图表实例
+const hasValidData = ref(false) // 是否有有效数据
+const chartOptions = ref(null) // 保存当前配置
+
+// 检查数据是否有效
+const checkDataValid = (data) => {
+	return data &&
+		data.Kline &&
+		Array.isArray(data.Kline) &&
+		data.Kline.length > 0 &&
+		data.Kline.every(item =>
+			Array.isArray(item) &&
+			item.length >= 5 &&
+			!isNaN(Number(item[1])) &&
+			!isNaN(Number(item[2])) &&
+			!isNaN(Number(item[3])) &&
+			!isNaN(Number(item[4]))
+		);
+}
 
 // 监听传入的数据变化
 watch(
 	() => props.chartData,
 	(newValue) => {
 		console.log('KLine组件收到数据：', newValue)
-		if (newValue) {
+		// 使用数据验证函数检查
+		const isValid = checkDataValid(newValue);
+		hasValidData.value = isValid;
+
+		if (isValid) {
 			nextTick(() => {
-				// 仅当容器存在且没有初始化过图表时创建
-				if (chartContainer.value && !chartInstance.value) {
-					chartInstance.value = echarts.init(chartContainer.value)
-					// 使用深拷贝防止数据被修改
-					const instanceData = JSON.parse(JSON.stringify(newValue))
-					KlineCanvsEcharts(instanceData, chartInstance.value)
+				try {
+					// 仅当容器存在且没有初始化过图表时创建
+					if (chartContainer.value && !chartInstance.value) {
+						// 使用try-catch捕获图表初始化和数据处理过程中的错误
+						chartInstance.value = echarts.init(chartContainer.value)
+						// 使用深拷贝防止数据被修改
+						const instanceData = JSON.parse(JSON.stringify(newValue))
+						KlineCanvsEcharts(instanceData, chartInstance.value)
+					}
+				} catch (error) {
+					console.error('初始化K线图表时出错:', error)
+					hasValidData.value = false;
 				}
 			})
+		} else {
+			console.error('无效的K线数据格式:', newValue)
 		}
 	},
 	{ immediate: true }
 )
 
 function KlineCanvsEcharts(datatok, instance) {
+	console.log('传入的K线数据:', datatok);
+
+	// 更严格的数据验证
+	if (!datatok) {
+		console.error('K线数据为空');
+		return;
+	}
+
+	if (!datatok.Kline) {
+		console.error('K线数据中没有Kline属性:', datatok);
+		return;
+	}
+
+	if (!Array.isArray(datatok.Kline)) {
+		console.error('Kline数据不是数组:', typeof datatok.Kline);
+		return;
+	}
+
+	if (datatok.Kline.length === 0) {
+		console.error('Kline数组为空');
+		return;
+	}
+
+	// 验证数组中的每个元素是否符合要求
+	const isValidKlineItem = datatok.Kline.every(item =>
+		Array.isArray(item) && item.length >= 5 &&
+		!isNaN(Number(item[1])) && !isNaN(Number(item[2])) &&
+		!isNaN(Number(item[3])) && !isNaN(Number(item[4]))
+	);
+
+	if (!isValidKlineItem) {
+		console.error('Kline数据格式不正确, 期望格式: [[date, open, close, low, high], ...]');
+		console.error('实际数据样例:', datatok.Kline[0]);
+		return;
+	}
+
 	// 切割数据方法
-	const data = datatok.Kline
+	const data = datatok.Kline;
 	const spliteDate = (a) => {
-		const categoryData = []
-		let value = []
-		for (let i = 0; i < a.length; i++) {
-			categoryData.push(a[i][0])
-			value.push([a[i][1], a[i][2], a[i][3], a[i][4]])
+		const categoryData = [];
+		let value = [];
+		try {
+			for (let i = 0; i < a.length; i++) {
+				// 确保每个数据项都是有效的
+				if (Array.isArray(a[i]) && a[i].length >= 5) {
+					categoryData.push(a[i][0]);
+					// 确保转换为数字类型
+					value.push([
+						Number(a[i][1]),
+						Number(a[i][2]),
+						Number(a[i][3]),
+						Number(a[i][4])
+					]);
+				}
+			}
+		} catch (error) {
+			console.error('处理K线数据时出错:', error);
+			return { categoryData: [], value: [] };
 		}
-		return { categoryData, value }
-	}
-	const dealData = spliteDate(data)
+		return { categoryData, value };
+	};
+
+	const dealData = spliteDate(data);
 
-	console.log('处理后的K线数据:', dealData)
+	console.log('处理后的K线数据:', dealData);
 	if (dealData.value.length === 0 || dealData.categoryData.length === 0) {
-		console.error('空数据，无法渲染图表')
-		return
+		console.error('空数据，无法渲染图表');
+		return;
 	}
 
 	// 给配置项
 	const KlineOption = {
 		title: {
-			text: datatok.name,
+			text: datatok.name || '股票K线图',
 			top: 20,
 			left: 20
 		},
 		tooltip: {
-			trigger: 'axis', // 触发类型 坐标轴触发
-			// 调用接口之后方法
-			formatter: function (a, b, d) {
-				let def =
-					a[0].name +
-					'<br/>' +
-					'开盘价' +
-					a[0].data[1] +
-					'<br/>' +
-					'收盘价' +
-					a[0].data[2] +
-					'<br/>' +
-					'最低价' +
-					a[0].data[3] +
-					'<br/>' +
-					'最高价' +
-					a[0].data[4]
-				// 判断a[1]是否存在
-				if (a[1] && a[1].seriesName) {
-					def += '<br/>' + a[1].seriesName + ':' + a[1].value
-				}
-				return def
+			trigger: 'axis',
+			show: true,
+			formatter: function (params) {
+				if (!params || params.length === 0) return '';
+				const param = params[0];
+				return `
+					<div style="font-weight:bold;margin-bottom:5px">${param.name}</div>
+					<div style="margin:3px 0">开盘价: ${param.data[1]}</div>
+					<div style="margin:3px 0">收盘价: ${param.data[2]}</div>
+					<div style="margin:3px 0">最低价: ${param.data[3]}</div>
+					<div style="margin:3px 0">最高价: ${param.data[4]}</div>
+					${params[1] && params[1].value !== '-' ? '<div style="margin:3px 0">MA5: ' + params[1].value + '</div>' : ''}
+				`;
 			},
-			// 鼠标放上去出现的数据展示
 			axisPointer: {
 				animation: false,
-				type: 'line',
-				linestyle: {
+				type: 'cross',
+				lineStyle: {
 					color: '#376df4',
 					width: 2,
 					opacity: 1
 				}
+			},
+			confine: true,
+			backgroundColor: 'rgba(255, 255, 255, 0.95)',
+			borderColor: '#ccc',
+			borderWidth: 1,
+			padding: 10,
+			textStyle: {
+				color: '#333'
 			}
 		},
 		// 横坐标内容
@@ -108,11 +191,10 @@ function KlineCanvsEcharts(datatok, instance) {
 		},
 		//控制坐标轴
 		grid: {
-			left: '3%',
-			right: '3%',
+			left: '12%',
+			right: '10%',
 			bottom: '10%',
-			top: '15%',
-			containLabel: true // 添加此项确保标签显示
+			top: '18%'
 		},
 		yAxis: {
 			scale: !0, //true
@@ -202,27 +284,139 @@ function KlineCanvsEcharts(datatok, instance) {
 	}
 
 	// 应用配置到图表实例
-	instance.setOption(KlineOption)
-
+	instance.setOption(KlineOption, true);
+	
+	// 保存配置到ref，供暴露的方法使用
+	chartOptions.value = KlineOption;
+	
+	// 绑定点击事件
+	instance.on('click', function(params) {
+		console.log('图表点击事件:', params);
+		if (params.componentType === 'series') {
+			const date = params.name;
+			const data = params.data;
+			if (Array.isArray(data) && data.length >= 5) {
+				console.log(`点击了 ${date} 的K线数据: 开盘${data[1]}, 收盘${data[2]}, 最低${data[3]}, 最高${data[4]}`);
+				// 在实际使用中可以替换为更友好的交互方式，如显示详细信息面板
+			}
+		}
+	});
+	
+	// 添加更多事件监听
+	instance.on('datazoom', function(params) {
+		console.log('图表缩放事件:', params);
+		// 可以在这里处理缩放事件，如记录当前缩放状态等
+	});
+	
+	instance.on('legendselectchanged', function(params) {
+		console.log('图例选择变化:', params);
+	});
+	
 	// 绑定窗口resize事件
-	window.addEventListener('resize', () => {
-		instance.resize()
-	})
+	const resizeHandler = () => {
+		if (instance) {
+			instance.resize();
+		}
+	};
+	
+	window.addEventListener('resize', resizeHandler);
+	
+	// 返回清理函数供组件卸载时使用
+	return () => {
+		window.removeEventListener('resize', resizeHandler);
+		instance.off('click');
+		instance.off('datazoom');
+		instance.off('legendselectchanged');
+	};
 }
 
 // 组件卸载时清理资源
 onUnmounted(() => {
 	if (chartInstance.value) {
-		chartInstance.value.dispose()
-		chartInstance.value = null
+		// 移除所有事件监听
+		chartInstance.value.off('click');
+		chartInstance.value.off('datazoom');
+		chartInstance.value.off('legendselectchanged');
+		
+		// 销毁图表实例
+		chartInstance.value.dispose();
+		chartInstance.value = null;
 	}
-	// 移除resize监听
-	window.removeEventListener('resize', () => {})
 })
 
 onMounted(() => {
 	console.log('KLine组件挂载完成')
 })
+
+// 对外暴露方法，允许父组件访问图表实例和方法
+defineExpose({
+	getChartInstance: () => chartInstance.value,
+	getOptions: () => chartOptions.value,
+	resize: () => {
+		if (chartInstance.value) {
+			chartInstance.value.resize()
+		}
+	},
+	// 缩放到指定日期范围
+	zoomToDateRange: (startDate, endDate) => {
+		if (!chartInstance.value || !chartOptions.value) return;
+		
+		const categoryData = chartOptions.value.xAxis[0].data;
+		if (!Array.isArray(categoryData)) return;
+		
+		const startIndex = categoryData.findIndex(date => date >= startDate);
+		const endIndex = categoryData.findIndex(date => date >= endDate);
+		
+		if (startIndex === -1 || endIndex === -1) return;
+		
+		// 计算百分比
+		const total = categoryData.length;
+		const start = (startIndex / total) * 100;
+		const end = (endIndex / total) * 100;
+		
+		// 应用缩放
+		chartInstance.value.dispatchAction({
+			type: 'dataZoom',
+			start: start,
+			end: end
+		});
+	},
+	// 高亮特定日期的K线
+	highlightDate: (date) => {
+		if (!chartInstance.value || !chartOptions.value) return;
+		
+		const categoryData = chartOptions.value.xAxis[0].data;
+		if (!Array.isArray(categoryData)) return;
+		
+		const index = categoryData.findIndex(d => d === date);
+		if (index !== -1) {
+			chartInstance.value.dispatchAction({
+				type: 'highlight',
+				seriesIndex: 0,
+				dataIndex: index
+			});
+			
+			// 同时显示tooltip
+			chartInstance.value.dispatchAction({
+				type: 'showTip',
+				seriesIndex: 0,
+				dataIndex: index
+			});
+		}
+	},
+	// 清除高亮
+	clearHighlight: () => {
+		if (chartInstance.value) {
+			chartInstance.value.dispatchAction({
+				type: 'downplay'
+			});
+			
+			chartInstance.value.dispatchAction({
+				type: 'hideTip'
+			});
+		}
+	}
+})
 </script>
 
 <style scoped>
@@ -231,5 +425,35 @@ onMounted(() => {
 	width: 100%;
 	min-height: 400px;
 	height: 100%;
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+	padding: 10px;
+	margin-bottom: 20px;
+	overflow: visible !important;
+	/* 确保dataZoom可见 */
+}
+
+.no-data-message {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: rgba(255, 255, 255, 0.9);
+	border-radius: 8px;
+	font-size: 16px;
+	color: #909399;
+}
+
+/* 确保图表容器在移动设备上也有足够的空间 */
+@media (max-width: 768px) {
+	.KlineClass {
+		min-height: 450px;
+		/* 给移动设备增加额外高度确保dataZoom可见 */
+	}
 }
 </style>