update 设备加工数量

This commit is contained in:
lb 2023-09-11 14:57:55 +08:00
parent c44ec6f49c
commit b91b8c3d3c
2 changed files with 69 additions and 11 deletions

View File

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

View File

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