src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue

@@ -82,18 +82,22 @@ export default {
 	computed: {
 		config() {
 			return {
+				color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
 				// title: {
 				// 	text: '折线图',
 				// },
 				grid: {
-					top: '24%',
+					top: '12%',
-					left: '3%',
+					left: '2%',
 					right: '5%',
 					bottom: '5%',
 					containLabel: true,
 				},
 				tooltip: {
 					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow'
+					}
 				},
 				legend: {
 					data: this.legend,
@@ -107,13 +111,145 @@ export default {
 				// },
 				xAxis: {
 					type: 'category',
-					boundaryGap: false,
+					boundaryGap: true,
-					data: this.xProps,
+					onZero: false,
+					axisTick: {
+						show: false,
+					},
+					axisLine: {
+						lineStyle: {
+							// color: 'red'
+						},
+					},
+					// data: this.xProps,
+					data: [
+						'设备1',
+						'设备2',
+						'设备3',
+						'设备4',
+						'设备5',
+						'设备6',
+						'设备7',
+						'设备8',
+						'设备9',
+						'设备10',
+						'设备11',
+						'设备12',
+						'设备13',
+						'设备14',
+						'设备15',
+						'设备16',
+						'设备17',
+						'设备18',
+						'设备19',
+						'设备20',
+					],
 				},
 				yAxis: {
 					type: 'value',
+					name: '单位/片',
+					nameTextStyle: {
+						color: '#999',
+						fontSize: 14,
+						align: 'right',
+					},
+					max: function (value) {
+						return value.max + Math.floor(value.max / 5);
+					},
 				},
-				series: this.series,
+				// 缩放 - 滑动
+				dataZoom: {
+					type: 'inside',
+				},
+				// series: this.series,
+				series: [
+					{
+						name: '上片数',
+						type: 'bar',
+						// barWidth: 12,
+						data: [
+							10,
+							12,
+							43,
+							4,
+							22,
+							32,
+							12,
+							8,
+							122,
+							0,
+							,
+							43,
+							4,
+							22,
+							32,
+							12,
+							8,
+							122,
+							77,
+							99,
+						],
+					},
+					{
+						name: '下片数',
+						type: 'bar',
+						// barWidth: 12,
+						data: [
+							10,
+							12,
+							43,
+							4,
+							22,
+							32,
+							12,
+							8,
+							122,
+							0,
+							4,
+							22,
+							32,
+							12,
+							8,
+							122,
+							0,
+							,
+							43,
+							4,
+							22,
+							32,
+						],
+					},
+					{
+						name: '检测数',
+						type: 'bar',
+						// barWidth: 12,
+						barCategoryGap: 12,
+						data: [
+							10,
+							12,
+							43,
+							4,
+							22,
+							4,
+							22,
+							32,
+							12,
+							8,
+							122,
+							0,
+							,
+							43,
+							4,
+							22,
+							32,
+							32,
+							12,
+							8,
+							122,
+							0,
+						],
+					},
+				],
 			};
 		},
 	},

src/views/quality/monitoring/qualityStatistics/graphPage.vue

@@ -7,14 +7,15 @@
 
 <template>
 	<div class="graph-page">
-		<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
+		<!-- <DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
 			<TotalGraph :summary-list="summaryList" />
-		</DetailGraph>
+		</DetailGraph> -->
-		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
+		<!-- <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
 			<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
-		</DetailGraph>
+		</DetailGraph> -->
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
-		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
+			<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
+		<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
 	</div>
 </template>