add custom echarts demo

2023-09-27 14:01:48 +08:00
parent fe0b5538a8
commit 5c796cd44f
5 changed files with 95800 additions and 253 deletions
--- a/src/views/equipment/timing-diagram/status/demo.html
+++ b/src/views/equipment/timing-diagram/status/demo.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<div
+			id="app"
+			style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
+
+		<script src="./echarts.js"></script>
+		<script>
+			const option = {
+				grid: [
+					{
+						id: 0,
+						top: 0,
+						height: 40,
+					},
+					{
+						id: 1,
+						top: 80,
+						height: 40,
+					},
+				],
+				xAxis: [
+					{
+						id: 0,
+						gridIndex: 0,
+						type: 'category',
+                        // axisTick: { show: false },
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+					},
+					{
+                        type: 'category',
+						id: 1,
+						gridIndex: 1,
+                        // axisTick: { show: false },
+						data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+					},
+				],
+				yAxis: [
+					{
+						gridIndex: 0,
+						type: 'value',
+						axisLine: {},
+                        splitLine: { show: false }
+					},
+					{
+                        gridIndex: 1,
+						type: 'value',
+                        axisLine: {},
+                        splitLine: { show: false }
+					},
+				],
+				series: [
+					{
+						xAxisIndex: 0,
+						yAxisIndex: 0,
+						data: [150, 230, 224, 218, 135, 147, 260],
+						type: 'line',
+					},
+					{
+						xAxisIndex: 1,
+						yAxisIndex: 1,
+						data: [1, 2, 3, 4, 5],
+						type: 'line',
+					},
+				],
+			};
+
+			const el = document.getElementById('app');
+			const myChart = echarts.init(el);
+
+			console.log('mychart', myChart);
+			myChart.setOption(option);
+		</script>
+	</body>
+</html>