From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理

---
 src/components/echarts/line2.vue |  259 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 259 insertions(+), 0 deletions(-)

diff --git a/src/components/echarts/line2.vue b/src/components/echarts/line2.vue
new file mode 100644
index 0000000..4affcd1
--- /dev/null
+++ b/src/components/echarts/line2.vue
@@ -0,0 +1,259 @@
+<script setup>
+	import { onMounted, ref, reactive, watchEffect, nextTick, onBeforeUnmount } from "vue";
+	import * as echarts from 'echarts';
+	import baseChart from "./BaseChart.vue";
+
+	const chart = ref(null);
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		unit: {
+			type: String,
+			default: ''
+		}
+	});
+
+	const typeList = ['璁惧娓╁害', '缁勭鐢垫祦', '缁勭鐢靛帇', '璐熻浇鐢垫祦'];
+
+	// 杩欎袱涓暟鍊兼槸鐧惧垎姣� 
+	const baseTop = 10;
+	const gridHeight = 20;
+
+
+
+	function makeXAxis(gridIndex, opt) {
+		return echarts.util.merge({
+			type: 'category',
+      boundaryGap: false,
+			gridIndex: gridIndex,
+			axisLine: { onZero: false, lineStyle: { color: '#ddd' } },
+			axisTick: { show: false },
+			axisLabel: { show: false },
+			splitLine: { show: false, lineStyle: { color: '#ddd' } },
+			// axisPointer: {
+			// 	lineStyle: { color: 'transparent' }
+			// }
+		}, opt || {}, true);
+	}
+
+	function makeYAxis(gridIndex, opt) {
+		return echarts.util.merge({
+			type: 'value',
+			gridIndex: gridIndex,
+			nameLocation: 'middle',
+			nameTextStyle: {
+				color: '#fff',
+				lineHeight: 18
+			},
+			nameRotate: 0,
+			boundaryGap: ['30%', '30%'],
+			axisTick: { show: false },
+			axisLine: { lineStyle: { color: '#ccc' } },
+			axisLabel: { show: false },
+			splitLine: { show: false }
+		}, opt || {}, true);
+	}
+
+
+	function makeGrid(top, opt) {
+		return echarts.util.merge({
+			top: top + '%',
+			height: gridHeight + '%',
+			left: '15%',
+			right: 14,
+		}, opt || {}, true);
+	}
+
+	function getSeries(datas) {
+		let res = [];
+		typeList.forEach((item, index) => {
+			res.push({
+				type: 'line',
+				smooth: true,
+				symbol: 'circle',
+				symbolSize: 5,
+				showSymbol: false,
+				xAxisIndex: index,
+				yAxisIndex: index,
+				lineStyle: {
+					width: 1
+				},
+				data: datas[item] || [],
+			});
+		});
+		return res;
+	}
+
+
+
+	function getOptions(xLabels, datas) {
+		xLabels = xLabels || [];
+		datas = datas || {};
+		let series = getSeries(datas);
+		const option = {
+			// title: {
+			// 	text: props.title,
+			// 	textStyle: {
+			// 		fontWeight: 'normal',
+			// 		fontSize: 14,
+			// 		color: '#fff'
+			// 	},
+			// 	left: '6%'
+			// },
+      color: ['#1186ce', '#e5c619', '#1d1dfd', '#2dbfae'],
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					lineStyle: {
+						color: '#fff'
+					}
+				},
+				formatter: function (params) {
+					if (params.length) {
+            // params.unshift({ seriesName: 'time', value: Math.floor(params[0].value), color: '#5193f2' })
+						let res = typeList.map((seriesName, idx) => {
+							for (var i = 0; i < params.length; i++) {
+								var param = params[i];
+								var style = 'color: ' + param.color;
+								if (param.seriesIndex === idx) {
+									return '<span style="' + style + '">'
+										+ seriesName
+										+ '锛�</span><span style="'
+										+ style + '">' + param.value + '</span>';
+								}
+							}
+						}).join('<br>');
+            console.log('res', res, '=============');
+            return res;
+            
+					}
+				}
+			},
+			axisPointer: {
+				link: [{ xAxisIndex: 'all' }],
+        lineStyle: {
+          color: '#fff'
+        },
+				snap: true
+			},
+			grid: [
+				makeGrid(baseTop),
+				makeGrid(baseTop + gridHeight),
+				makeGrid(baseTop + gridHeight * 2),
+				makeGrid(baseTop + gridHeight * 3),
+				// makeGrid(baseTop + gridHeight * 3, {
+				// 	height: gridHeight - 10,
+				// 	borderColor: '#ccc',
+				// 	borderWidth: 1,
+				// 	z: 10
+				// }),
+			],
+			xAxis: [
+				makeXAxis(0, {
+					axisLine: { show: false }
+				}),
+				makeXAxis(1, {
+					axisLine: { show: false }
+				}),
+				makeXAxis(2, {
+					axisLine: { show: false }
+				}),
+        makeXAxis(3, {
+          data: xLabels,
+          axisTick: { show: true },
+          axisLabel: { show: true },
+          // boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+        }),
+				// makeXAxis(4, {
+				// 	position: 'top',
+				// 	axisLine: { show: false, onZero: false },
+				// 	splitLine: { show: true },
+				// 	axisLabel: { show: true, textStyle: { color: '#555' } },
+				// 	axisPointer: {
+				// 		show: true,
+				// 		lineStyle: {
+				// 			color: '#478cf1',
+				// 			width: 1.5
+				// 		}
+				// 	}
+				// })
+			],
+			// xAxis: [{
+			// 	type: 'category',
+			// 	boundaryGap: false,
+			// 	axisLine: {
+			// 		lineStyle: {
+			// 			color: '#fff'
+			// 		}
+			// 	},
+			// 	data: xLabels
+			// }],
+			yAxis: [
+				makeYAxis(0, {
+					name: typeList[0].replace(/(.{2})/g, '$1\n').replace(/\n$/, ''),
+				}),
+				makeYAxis(1, {
+					name: typeList[1].replace(/(.{2})/g, '$1\n').replace(/\n$/, ''),
+				}),
+				makeYAxis(2, {
+					name: typeList[2].replace(/(.{2})/g, '$1\n').replace(/\n$/, ''),
+				}),
+				makeYAxis(3, {
+					name: typeList[3].replace(/(.{2})/g, '$1\n').replace(/\n$/, ''),
+				})
+			],
+			series
+		};
+
+		return option;
+	}
+
+	let myChart = null;
+
+	function initChart() {
+		if (chart.value) {
+			// myChart = chart.value.getChart();
+
+			let option = getOptions();
+			chart.value.setOption(option);
+		}
+	}
+
+	function updateChart(xLabels, datas) {
+		if (chart.value) {
+			let option = getOptions(xLabels, datas);
+			chart.value.setOption(option);
+		}
+	}
+
+
+	defineExpose({
+		updateChart
+	});
+
+	onMounted(() => {
+		// console.log('line mounted', '=============');
+
+		initChart();
+	});
+</script>
+
+<template>
+  <div class="line-chart">
+    <base-chart ref="chart"></base-chart>
+  </div>
+</template>
+
+<style scoped>
+.line-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

--
Gitblit v1.9.1