update 产品质量分析chart

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

@@ -15,27 +15,143 @@ import * as echarts from 'echarts';
 export default {
 	name: 'LineChart',
 	components: {},
-	props: ['config'],
+	props: ['config', 'list'],
 	data() {
 		return {
 			chart: null,
 		};
 	},
-	computed: {},
+	// watch: {
+	// 	list: {
+	// 		handler(listdata) {
+	// 			if (listdata && listdata.length) {
+	// 				console.log('[linechart] list changed', listdata);
+	// 				const option = this.handleList(listdata);
+	// 				this.setOption(option);
+	// 			}
+	// 		},
+	// 		immediate: true,
+	// 	},
+	// },
+	computed: {
+		option() {
+			const opt = [];
+			this.list.map((eq) => {
+				/** [设备名, ok数量, 不ok数量] */
+				opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
+			});
+			return {
+				color: ['#8EF0AB', '#288AFF'],
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				legend: {
+					itemWidth: 12,
+					itemHeight: 12,
+					right: 0,
+				},
+				grid: {
+					left: '1%',
+					right: '1%',
+					top: '8%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				// xAxis: [
+				// 	{
+				// 		type: 'category',
+				// 		data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+				// 	},
+				// ],
+				// yAxis: [
+				// 	{
+				// 		type: 'value',
+				// 		splitLine: {
+				// 			lineStyle: {
+				// 				color: '#0001',
+				// 			},
+				// 		},
+				// 	},
+				// ],
+				xAxis: {
+					type: 'category',
+					axisTick: { show: false },
+					data: opt.map((item) => item[0]),
+				},
+				yAxis: {
+					type: 'value',
+					splitLine: {
+						lineStyle: {
+							color: '#0001',
+						},
+					},
+				},
+				series: [
+					{
+						name: '不合格数量',
+						type: 'bar',
+						barWidth: 20,
+						stack: 's',
+						data: opt.map((item) => item[2]),
+					},
+					{
+						name: '合格数量',
+						type: 'bar',
+						barWidth: 20,
+						stack: 's',
+						data: opt.map((item) => item[1]),
+					},
+				],
+			};
+		},
+	},
 	mounted() {
+		console.log('[linechart] mounted');
 		this.init();
 	},
 	beforeDestroy() {
 		if (this.chart) {
 			this.chart.dispose();
 		}
+		console.log('[linechart] destroyed');
 	},
 	methods: {
 		init() {
-			console.log('thsi el', this.$el);
 			if (!this.chart) this.chart = echarts.init(this.$el);
-			this.chart.setOption(this.config);
+			console.log('[linechart] initialized', this.$el);
+			this.$nextTick(() => {
+				this.setOption();
+			});
 		},
+
+		setOption() {
+			if (this.chart) this.chart.setOption(this.option);
+			console.log('[linechart] option settled');
+		},
+
+		// handleList(list) {
+		// 	/** 清空数据 */
+		// 	this.option.series[0].data.splice(0);
+		// 	this.option.series[1].data.splice(0);
+		// 	this.option.xAxis.data.splice(0);
+
+		// 	list.map((eq) => {
+		// 		this.option.xAxis.data.push(eq.equipmentName);
+		// 		this.option.series[0].data.push(eq.nokQuantity);
+		// 		this.option.series[1].data.push(eq.okQuantity);
+		// 	});
+
+		// 	this.setOption();
+
+		// 	// const pureList = list.map((eq) => ({
+		// 	// 	name: eq.equipmentName,
+		// 	// 	ok: eq.okQuantity,
+		// 	// 	nok: eq.nokQuantity,
+		// 	// }));
+		// },
 	},
 };
 </script>
@@ -43,7 +159,7 @@ export default {
 <style scoped lang="scss">
 .line-chart {
 	padding: 0 12px;
-	background: #e1e1e1;
-	min-height: 320px;
+	height: 1px;
+	flex: 1;
 }
 </style>