yudao-dev/src/views/equipment/analysis/quality/components/lineChart.vue

<!-- 
    filename: lineChart.vue
    author: liubin
    date: 2023-09-04 13:45:00
    description: 
-->

<template>
	<div class="line-chart"></div>
</template>

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

export default {
	name: 'LineChart',
	components: {},
	props: ['config', 'list'],
	data() {
		return {
			chart: null,
		};
	},
	watch: {
		list: {
			handler(listdata) {
				this.setOption();
			},
			immediate: true,
			deep: true,
		},
	},
	computed: {
		option() {
			const opt = [];
			this.list.map((eq) => {
				/** [设备名, ok数量, 不ok数量, 加工数量, 合格率] */
				opt.push([
					eq.equipmentName,
					eq.okQuantity,
					eq.nokQuantity,
					eq.totalQuantity,
					eq.passRate?.toFixed(4),
				]);
			});
			return {
				color: ['#288AFF', '#8EF0AB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
					formatter: (params) => {
						const name = params[0].name;
						const goodRate = opt.find((item) => item[0] == name)[4] || '0';
						return `
							<h1 style="font-size: 18px; letter-spacing: 1px;">${
								params[0].axisValue
							} <small>${goodRate}%</small></h1>
							<ul style="margin: 0; padding: 0; min-width: 128px;">
								${params
									.map(
										(item, index) => `
											<li style="list-style: none; display: flex; justify-content: space-between; align-items: center;">
												<div>
													<span style="display: inline-block; width: 10px; height: 10px; border-radius: 2px; background-color: ${item.color}; margin-right: 5px;"></span>
													${item.seriesName}
												</div>
												${item.value}
											</li>
								`
									)
									.join('')}
							</ul>
						`;
					},
				},
				legend: {
					itemWidth: 12,
					itemHeight: 12,
					right: 0,
				},
				grid: {
					left: '1%',
					right: '1%',
					top: '8%',
					bottom: '3%',
					containLabel: true,
				},
				// xAxis: [
				// 	{
				// 		type: 'category',
				// 		data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
				// 	},
				// ],
				// yAxis: [
				// 	{
				// 		type: 'value',
				// 		splitLine: {
				// 			lineStyle: {
				// 				color: '#0001',
				// 			},
				// 		},
				// 	},
				// ],
				xAxis: {
					type: 'category',
					axisTick: { show: false },
					axisLabel: {
						rotate: 45,
					},
					data: opt.map((item) => item[0]),
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							color: '#0001',
						},
					},
				},
				series: [
					{
						animation: false,
						name: '合格数量',
						type: 'bar',
						barWidth: 20,
						stack: 's',
						data: opt.map((item) => item[1]),
					},
					{
						animation: false,
						name: '不合格数量',
						type: 'bar',
						barWidth: 20,
						stack: 's',
						data: opt.map((item) => item[2]),
					},
					// {
					// 	name: '加工数量',
					// 	type: 'bar',
					// 	barWidth: 20,
					// 	data: opt.map((item) => item[3]),
					// },
					// {
					// 	name: '合格率',
					// 	type: 'line',
					// 	data: opt.map((item) => item[4]),
					// },
				],
			};
		},
	},
	mounted() {
		console.log('[linechart] mounted');
		this.init();
	},
	beforeDestroy() {
		if (this.chart) {
			this.chart.dispose();
		}
		console.log('[linechart] destroyed');
	},
	methods: {
		init() {
			if (!this.chart) this.chart = echarts.init(this.$el);
			console.log('[linechart] initialized', this.$el);
			this.$nextTick(() => {
				this.setOption();
			});
		},

		setOption() {
			if (this.chart) this.chart.setOption(this.option);
			console.log('[linechart] option settled');
		},

		// handleList(list) {
		// 	/** 清空数据 */
		// 	this.option.series[0].data.splice(0);
		// 	this.option.series[1].data.splice(0);
		// 	this.option.xAxis.data.splice(0);

		// 	list.map((eq) => {
		// 		this.option.xAxis.data.push(eq.equipmentName);
		// 		this.option.series[0].data.push(eq.nokQuantity);
		// 		this.option.series[1].data.push(eq.okQuantity);
		// 	});

		// 	this.setOption();

		// 	// const pureList = list.map((eq) => ({
		// 	// 	name: eq.equipmentName,
		// 	// 	ok: eq.okQuantity,
		// 	// 	nok: eq.nokQuantity,
		// 	// }));
		// },
	},
};
</script>

<style scoped lang="scss">
.line-chart {
	padding: 0 12px;
	height: 1px;
	flex: 1;
}
</style>