165 lines
2.7 KiB
Vue
165 lines
2.7 KiB
Vue
<!--
|
|
filename: graph.vue
|
|
author: liubin
|
|
date: 2023-08-31 14:00:02
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="chart-wrapper">
|
|
<div class="blue-title">各设备加工数量</div>
|
|
<div class="chart" ref="chart"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import edata from './data';
|
|
|
|
export default {
|
|
name: 'LineChartInEquipmentProcessAmount',
|
|
components: {},
|
|
props: ['equipmentList', 'render'],
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
option: {
|
|
color: ['#288AFF'],
|
|
grid: {
|
|
top: 64,
|
|
left: 56,
|
|
right: 64,
|
|
bottom: 56,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
title: {
|
|
show: false,
|
|
text: '各设备加工数量',
|
|
textStyle: {
|
|
color: '#232323',
|
|
fontSize: 16,
|
|
},
|
|
left: 'center',
|
|
top: 24,
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataZoom: {
|
|
xAxisIndex: false,
|
|
},
|
|
saveAsImage: {
|
|
pixelRatio: 2,
|
|
},
|
|
},
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
yAxisIndex: 0,
|
|
filterMode: 'none',
|
|
},
|
|
{
|
|
type: 'inside',
|
|
yAxisIndex: 0,
|
|
filterMode: 'none',
|
|
},
|
|
],
|
|
yAxis: {
|
|
type: 'category',
|
|
data: [],
|
|
name: '设备名',
|
|
nameTextStyle: {
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '数量',
|
|
nameTextStyle: {
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [],
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
label: {
|
|
show: true,
|
|
distance: 50,
|
|
formatter: '{c}',
|
|
},
|
|
large: true,
|
|
largeThreshold: 20,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
render: {
|
|
handler: function (newVal, oldVal) {
|
|
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
|
|
this.$nextTick(() => {
|
|
if (this.chart) this.chart.setOption(this.updateConfig(this.option),true);
|
|
});
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) this.chart.dispose();
|
|
},
|
|
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>
|
|
|
|
<style scoped lang="scss">
|
|
.chart-wrapper {
|
|
height: 100%;
|
|
flex: 1;
|
|
// background: #f9f9f9;
|
|
}
|
|
|
|
.chart {
|
|
height: 100%;
|
|
width: 100%;
|
|
// background: lightcoral;
|
|
}
|
|
|
|
.blue-title {
|
|
position: relative;
|
|
padding: 4px 0;
|
|
padding-left: 12px;
|
|
font-size: 14px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 6px;
|
|
height: 16px;
|
|
width: 4px;
|
|
border-radius: 1px;
|
|
background: #0b58ff;
|
|
}
|
|
}
|
|
</style>
|