update 设备加工数量
This commit is contained in:
parent
c44ec6f49c
commit
b91b8c3d3c
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user