|
@@ -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: { |
|
|
|
|
|
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: { |
|
|
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; |
|
|
|
|
|
padding: 12px; |
|
|
|
|
|
|
|
|
// background: #f9f9f9; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chart { |
|
|
.chart { |
|
|