diff --git a/src/views/monitoring/equipmentProcessAmount/graph.vue b/src/views/monitoring/equipmentProcessAmount/graph.vue
index c75926b5..7d6843cb 100644
--- a/src/views/monitoring/equipmentProcessAmount/graph.vue
+++ b/src/views/monitoring/equipmentProcessAmount/graph.vue
@@ -7,7 +7,6 @@
@@ -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;
+ },
+ },
};
@@ -58,8 +116,7 @@ export default {
.chart-wrapper {
height: 100%;
flex: 1;
- background: #f1f1f1;
- padding: 12px;
+ // background: #f9f9f9;
}
.chart {
diff --git a/src/views/monitoring/equipmentProcessAmount/index.vue b/src/views/monitoring/equipmentProcessAmount/index.vue
index ccbe715e..4119be8d 100644
--- a/src/views/monitoring/equipmentProcessAmount/index.vue
+++ b/src/views/monitoring/equipmentProcessAmount/index.vue
@@ -48,7 +48,8 @@