add line chart

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>