<!-- 
    filename: graph.vue
    author: liubin
    date: 2023-08-31 14:00:02
    description: 
-->

<template>
	<div class="chart-wrapper">
		<div class="chart" ref="chart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'LineChartInEquipmentProcessAmount',
	components: {},
	props: ['equipmentList'],
	data() {
		return {
			chart: null,
			option: {
				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: [],
						type: 'bar',
						barWidth: 20,
						label: {
							show: true,
							distance: 50,
							formatter: '{c}',
						},
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)',
						},
					},
				],
			},
		};
	},
	mounted() {
		// console.log('this.eq list', this.equipmentList);
		if (!this.chart) this.chart = echarts.init(this.$refs.chart);

		this.$nextTick(() => {
			this.chart.setOption(this.updateConfig(this.option));
		});
	},
	beforeDestroy() {
		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%;
}
</style>
