src/views/monitoring/equipmentProcessAmount/graph.vue

@@ -7,7 +7,6 @@
 
 <template>
 	<div class="chart-wrapper">
-		<h4>line graph</h4>
 		<div class="chart" ref="chart"></div>
 	</div>
 </template>
@@ -18,22 +17,65 @@ import * as echarts from 'echarts';
 export default {
 	name: 'LineChartInEquipmentProcessAmount',
 	components: {},
-	props: {},
+	props: ['equipmentList'],
 	data() {
 		return {
 			chart: null,
 			option: {
-				xAxis: {
-					type: 'category',
-					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+				grid: {
+					top: 64,
+					left: 56,
+					right: 24,
+					bottom: 56,
+				},
+				title: {
+					show: true,
+					text: '各设备加工数量',
+					textStyle: {
+						color: '#232323',
+						fontSize: 16,
+					},
+					left: 'center',
+					top: 24,
 				},
 				yAxis: {
+					type: 'category',
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#ccc',
+						},
+					},
+					axisTick: {
+						show: false,
+					},
+					// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+					data: [],
+					name: '设备名',
+					nameTextStyle: {
+						fontSize: 14,
+					},
+				},
+				xAxis: {
 					type: 'value',
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#ccc',
+						},
+					},
 				},
 				series: [
 					{
-						data: [120, 200, 150, 80, 70, 110, 130],
+						// data: [120, 200, 150, 80, 70, 110, 130],
+						data: [],
 						type: 'bar',
+						barWidth: 20,
+						label: {
+							show: true,
+							distance: 50,
+							formatter: '{c}',
+						},
 						showBackground: true,
 						backgroundStyle: {
 							color: 'rgba(180, 180, 180, 0.2)',
@@ -44,13 +86,29 @@ export default {
 		};
 	},
 	mounted() {
+		// console.log('this.eq list', this.equipmentList);
 		if (!this.chart) this.chart = echarts.init(this.$refs.chart);
-		this.chart.setOption(this.option);
+
+		this.$nextTick(() => {
+			this.chart.setOption(this.updateConfig(this.option));
+		});
 	},
 	beforeDestroy() {
 		this.chart.dispose();
 	},
-	methods: {},
+	methods: {
+		updateConfig(config) {
+			let nameData = [];
+			let valueData = [];
+			this.equipmentList.map((eq) => {
+				nameData.push(eq.equipmentName);
+				valueData.push(eq.totalQuantity);
+			});
+			config.yAxis.data = nameData;
+			config.series[0].data = valueData;
+			return config;
+		},
+	},
 };
 </script>
 
@@ -58,8 +116,7 @@ export default {
 .chart-wrapper {
 	height: 100%;
 	flex: 1;
-	background: #f1f1f1;
-	padding: 12px;
+	// background: #f9f9f9;
 }
 
 .chart {

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -48,7 +48,8 @@
 
 					<div class="graph" style="height: 56vh;" v-else>
 						<!-- graph  -->
-						<Graph />
+						<Graph v-if="list.length" :equipment-list="list" />
+						<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
 					</div>
 				</transition>
 			</div>