src/views/equipment/analysis/quality/components/lineChart.vue

@@ -6,10 +6,12 @@
 -->
 
 <template>
-	<div class="line-chart">line LineChart</div>
+	<div class="line-chart"></div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
 export default {
 	name: 'LineChart',
 	components: {},
@@ -20,15 +22,28 @@ export default {
 		};
 	},
 	computed: {},
-	methods: {},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		if (this.chart) {
+			this.chart.dispose();
+		}
+	},
+	methods: {
+		init() {
+			console.log('thsi el', this.$el);
+			if (!this.chart) this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.config);
+		},
+	},
 };
 </script>
 
 <style scoped lang="scss">
 .line-chart {
-	margin: 24px;
+	padding: 0 12px;
-	padding: 12px;
 	background: #e1e1e1;
-	min-height: 200px;
+	min-height: 320px;
 }
 </style>

src/views/equipment/analysis/quality/index.vue

@@ -29,7 +29,7 @@
 			@close="dialogClose"
 			@cancel="dialogClose"
 			@confirm="dialogClose">
-			<LineChart :config="lineChartConfig" />
+			<LineChart v-if="dialogVisible" :config="lineChartConfig" />
 		</base-dialog>
 	</div>
 </template>
@@ -72,8 +72,8 @@ export default {
 					dateType: 'daterange', // datetimerange
 					// format: 'yyyy-MM-dd HH:mm:ss',
 					format: 'yyyy-MM-dd',
-					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
-					valueFormat: 'timestamp',
+					// valueFormat: 'timestamp',
 					rangeSeparator: '-',
 					startPlaceholder: '开始日期',
 					endPlaceholder: '结束日期',
@@ -150,7 +150,67 @@ export default {
 					align: 'center',
 				},
 			],
-
+			lineChartConfig: {
+				grid: {
+					top: 88,
+					left: 56,
+					right: 56,
+					bottom: 56,
+				},
+				legend: {
+					top: 0,
+					left: 0,
+					padding: 5,
+                    icon: 'roundRect',
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    itemGap: 20,
+					textStyle: {
+                        fontSize: 14,
+                        lineHeight: 14
+                    },
+				},
+				xAxis: {
+					type: 'category',
+					data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+				},
+				yAxis: {
+					type: 'value',
+                    name: '合格率',
+                    nameLocation: 'end',
+                    nameTextStyle: {
+                        fontSize: 14,
+                        align: 'right'
+                    },
+                    nameGap: 26
+				},
+				series: [
+					{
+						name: '产线1',
+						data: [150, 230, 224, 218, 135],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线2',
+						data: [111, 224, 42, 11, 24],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线3',
+						data: [218, 112, 331, 44, 99],
+						type: 'line',
+						smooth: true,
+					},
+					{
+						name: '产线4',
+						data: [3, 221, 42, 553, 311],
+						type: 'line',
+						smooth: true,
+					},
+				],
+			},
 			// 查询参数
 			queryParams: {
 				pageNo: 1,