diff --git a/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue b/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue
index 3f3978a8..10366b3f 100644
--- a/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue
+++ b/src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue
@@ -16,15 +16,19 @@ export default {
 	name: 'LineDataChart',
 	components: {},
 	props: {
-        xProps: {
-            type: Array,
-            default: () => [],
-        },
-        legend: {
-            type: Array,
-            default: () => [],
-        }
-    },
+		xProps: {
+			type: Array,
+			default: () => [],
+		},
+		legend: {
+			type: Array,
+			default: () => [],
+		},
+		series: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			chart: null,
@@ -51,89 +55,50 @@ export default {
 			// 	'产线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],
-				},
-			],
+			// series: [
+			// 	{
+			// 		name: 'a',
+			// 		type: 'line',
+			// 		data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
+			// 	},
+			// 	{
+			// 		name: 'lkj',
+			// 		type: 'line',
+			// 		data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
+			// 	},
+			// 	{
+			// 		name: '测试11',
+			// 		type: 'line',
+			// 		data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
+			// 	},
+			// 	{
+			// 		name: '测试22',
+			// 		type: 'line',
+			// 		data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
+			// 	},
+			// ],
 		};
 	},
-	computed: {},
-	mounted() {
-		this.init();
-	},
-	methods: {
-		init() {
-			if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
-			this.setOption();
-		},
-		setOption(option) {
-            console.log("legend", this.legend)
-			const defaultOption = {
+	computed: {
+		config() {
+			return {
 				// title: {
 				// 	text: '折线图',
 				// },
-                grid: {
-                    top: '24%',
-                    left: '3%',
-                    right: '5%',
-                    bottom: '5%',
-                    containLabel: true,
-                },
+				grid: {
+					top: '24%',
+					left: '3%',
+					right: '5%',
+					bottom: '5%',
+					containLabel: true,
+				},
 				tooltip: {
 					trigger: 'axis',
 				},
 				legend: {
 					data: this.legend,
-                    top: '5%',
-                    icon: 'circle'
+					top: '5%',
+					icon: 'circle',
 				},
 				// toolbox: {
 				// 	feature: {
@@ -148,9 +113,30 @@ export default {
 				yAxis: {
 					type: 'value',
 				},
-                series: this.series
+				series: this.series,
 			};
-			this.chart.setOption(defaultOption);
+		},
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		config(val) {
+			this.$nextTick(() => {
+				this.init();
+			});
+		},
+	},
+	methods: {
+		init() {
+			if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
+
+			this.$nextTick(() => {
+				this.setOption();
+			});
+		},
+		setOption() {
+			this.chart.setOption(this.config);
 		},
 	},
 };
diff --git a/src/views/quality/monitoring/qualityStatistics/graphPage.vue b/src/views/quality/monitoring/qualityStatistics/graphPage.vue
index 49ed1936..4aa9a981 100644
--- a/src/views/quality/monitoring/qualityStatistics/graphPage.vue
+++ b/src/views/quality/monitoring/qualityStatistics/graphPage.vue
@@ -11,10 +11,7 @@
 			<TotalGraph :summary-list="summaryList" />
 		</DetailGraph>
 		<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
-			<LineGraph
-				:x-props="lineData.xProps"
-				:legend="legend"
-				:series="lineData.list.map(buildSeries)" />
+			<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
 		</DetailGraph>
 		<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
 		<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
@@ -42,35 +39,40 @@ export default {
 	data() {
 		return {
 			legend: [],
+			series: [],
 		};
 	},
-	computed: {},
+	mounted() {
+		this.buildLegend();
+
+		this.$nextTick(() => {
+			this.series = this.lineData.list.map(this.buildSeries);
+			console.log('this.series', this.series);
+		});
+	},
 	methods: {
 		buildSeries(item) {
-			if (!this.legend.length) this.buildLegend();
-			const data = [];
-			this.legend.forEach((key) => {
-				console.log('key item.key', item, key, item[key]);
-				if (item[key] == null) item[key] = null;
-				data.push(item[key]);
-			});
-			console.log('buildSeries', {
+			console.log('this.list', this.lineData.list, this.lineData.xProps);
+			const seriesItem = {
 				name: item.inspectionContent,
 				type: 'line',
-				data: data,
-			});
-			return {
-				name: item.inspectionContent,
-				type: 'line',
-				data: data,
+				data: [],
 			};
+
+			this.lineData.xProps.forEach((prop) => {
+				if (prop in item) {
+					seriesItem.data.push(item[prop]);
+				} else {
+					seriesItem.data.push(null);
+				}
+			});
+
+			return seriesItem;
 		},
 		buildLegend() {
 			this.legend = this.lineData.list
 				.map((item) => item.inspectionContent)
 				.sort();
-			// this.legend.push('检测总数', '比例%')
-			console.log('buliding legend', this.legend);
 		},
 	},
 };