src/views/equipment/timing-diagram/status/demo.html

@@ -13,10 +13,19 @@
 		<script src="./echarts.js"></script>
 		<script>
 			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'line',
+						label: {
+							backgroundColor: '#6a7985',
+						},
+					},
+				},
 				grid: [
 					{
 						id: 0,
-						top: 0,
+						top: 10,
 						height: 40,
 					},
 					{
@@ -30,41 +39,93 @@
 						id: 0,
 						gridIndex: 0,
 						type: 'category',
-                        // axisTick: { show: false },
+						axisTick: {
+							alignWithLabel: true,
+							inside: true,
+						},
+						boundaryGap: false,
 						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 					},
 					{
-                        type: 'category',
 						id: 1,
+						gridIndex: 0,
+						axisLabel: { show: false },
+						axisLine: { show: false },
+					},
+					{
+						id: 2,
 						gridIndex: 1,
-                        // axisTick: { show: false },
+						type: 'category',
+						axisTick: {
+							alignWithLabel: true,
+							inside: true,
+						},
+						boundaryGap: 10,
 						data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
 					},
+					{
+						id: 3,
+						gridIndex: 1,
+						axisLabel: { show: false },
+						axisLine: { show: false },
+					},
 				],
 				yAxis: [
+					// 主y轴
 					{
+						id: 0,
 						gridIndex: 0,
 						type: 'value',
-						axisLine: {},
+						splitLine: { show: false },
-                        splitLine: { show: false }
+						name: '设备1',
+						nameLocation: 'center',
+						nameGap: 56,
+						nameRotate: 0,
+						nameTextStyle: {
+							fontSize: 18,
+						},
+						axisLine: {
+							show: true,
+							lineStyle: {},
+						},
+						axisLabel: { show: false },
+						axisTick: { show: false },
+					},
+                    // 辅y轴
+					{
+						id: 1,
+						gridIndex: 0,
+						type: 'value',
+						splitLine: { show: false },
+						axisLabel: { show: false },
+						axisTick: { show: false },
 					},
 					{
-                        gridIndex: 1,
+						id: 2,
+						gridIndex: 1,
 						type: 'value',
-                        axisLine: {},
+						axisLine: {},
-                        splitLine: { show: false }
+						splitLine: { show: false },
+						name: '设备2',
+						nameLocation: 'center',
+						nameGap: 56,
+						nameRotate: 0,
+						nameTextStyle: {
+							fontSize: 18,
+						},
 					},
+					{ id: 3, gridIndex: 1 },
 				],
 				series: [
 					{
 						xAxisIndex: 0,
 						yAxisIndex: 0,
-						data: [150, 230, 224, 218, 135, 147, 260],
+						data: [1, 2, 3, 4, 5],
 						type: 'line',
 					},
 					{
-						xAxisIndex: 1,
+						xAxisIndex: 2,
-						yAxisIndex: 1,
+						yAxisIndex: 2,
 						data: [1, 2, 3, 4, 5],
 						type: 'line',
 					},