add line chart

src/views/quality/monitoring/qualityStatistics/components/detailGraph.vue

@@ -37,6 +37,8 @@ export default {
 	border: 1px solid #cfcfcf;
 	border-radius: 8px;
 	padding: 8px;
+	display: flex;
+	flex-direction: column;
 }
 
 .title > span {
@@ -45,4 +47,9 @@ export default {
 	background: rgba(20, 145, 210, 0.155);
 	border-left: 4px solid rgba(20, 145, 210);
 }
+
+.content {
+    flex: 1; 
+    // background-color: aquamarine;
+}
 </style>

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

@@ -0,0 +1,154 @@
+<!-- 
+    filename: line.vue
+    author: liubin
+    date: 2023-08-07 16:14:11
+    description: 
+-->
+
+<template>
+	<div ref="line-chart" class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineDataChart',
+	components: {},
+	props: {},
+	data() {
+		return {
+			chart: null,
+			inspectionContents: [
+				'检测内容1',
+				'检测内容2',
+				'检测内容3',
+				'检测内容4',
+				'检测内容5',
+				'检测内容6',
+				'检测内容7',
+				'检测内容8',
+				'检测总数',
+				'比例%',
+			],
+			xProps: [
+				'产线1',
+				'产线2',
+				'产线3',
+				'产线4',
+				'产线5',
+				'产线6',
+				'产线7',
+				'产线8',
+				'产线9',
+			],
+			series: [
+				{
+					name: '检测内容1',
+					type: 'line',
+					data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
+				},
+				{
+					name: '检测内容2',
+					type: 'line',
+					data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
+				},
+				{
+					name: '检测内容3',
+					type: 'line',
+					data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
+				},
+				{
+					name: '检测内容4',
+					type: 'line',
+					data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
+				},
+				{
+					name: '检测内容5',
+					type: 'line',
+					data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+				{
+					name: '检测内容6',
+					type: 'line',
+					data: [920, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+				{
+					name: '检测内容7',
+					type: 'line',
+					data: [1020, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+				{
+					name: '检测内容8',
+					type: 'line',
+					data: [1120, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+				{
+					name: '检测总数',
+					type: 'line',
+					data: [1220, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+				{
+					name: '比例%',
+					type: 'line',
+					data: [1320, 932, 901, 934, 1290, 1330, 1320, 932, 901],
+				},
+			],
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
+			this.setOption();
+		},
+		setOption(option) {
+			const defaultOption = {
+				// title: {
+				// 	text: '折线图',
+				// },
+                grid: {
+                    top: '24%',
+                    left: '3%',
+                    right: '5%',
+                    bottom: '5%',
+                    containLabel: true,
+                },
+				tooltip: {
+					trigger: 'axis',
+				},
+				legend: {
+					data: this.inspectionContents,
+                    top: '5%',
+                    icon: 'circle'
+				},
+				// toolbox: {
+				// 	feature: {
+				// 		saveAsImage: {},
+				// 	},
+				// },
+				xAxis: {
+					type: 'category',
+					boundaryGap: false,
+					data: this.xProps,
+				},
+				yAxis: {
+					type: 'value',
+				},
+                series: this.series
+			};
+			this.chart.setOption(defaultOption);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	// background: #f3f3f3;
+	height: 100%;
+}
+</style>

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

@@ -10,7 +10,9 @@
 		<DetailGraph id="dg1" key="dg1" ref="dg1" title="数据总览">
 			<TotalGraph :summary-list="summaryList" />
 		</DetailGraph>
-		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据" />
+		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
+            <LineGraph />
+        </DetailGraph>
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
 		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
 	</div>
@@ -19,10 +21,11 @@
 <script>
 import DetailGraph from './components/detailGraph.vue';
 import TotalGraph from './components/graphs/total.vue';
+import LineGraph from './components/graphs/line.vue'
 
 export default {
 	name: 'GraphPage',
-	components: { DetailGraph, TotalGraph },
+	components: { DetailGraph, TotalGraph, LineGraph },
 	props: {
 		summaryList: {
 			type: Array,