yudao-dev/src/views/databoard/components/NumRateChart.vue

<template>
	<div style="height: 370px">
		<NotMsg v-show="notMsg" />
		<div
			id="numRateChart"
			class="num-rate-chart"
			style="width: 900px; height: 420px"
			v-show="!notMsg"></div>
	</div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize';
import NotMsg from './../components/NotMsg';
export default {
	name: 'NumRateChart',
	mixins: [resize],
	components: { NotMsg },
	data() {
		return {
			chart: null,
			notMsg: true,
		};
	},
	computed: {
		productline() {
			return this.$store.state.websocket.productline;
		},
	},
	watch: {
		productline: {
			handler(newVal, oldVal) {
				if (newVal === oldVal) {
					return false;
				}
				this.updateChart();
				this.$emit('emitFun');
			},
		},
	},
	mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart();
	},
	methods: {
		updateChart() {
			if (this.productline && this.productline.length > 0) {
				this.notMsg = false;
			} else {
				this.notMsg = true;
				return;
			}
			let xData = [];
			let outputNum = [];
			let passRate = [];
			for (let i = 0; i < this.productline.length - 1; i++) {
				// 二次循环，注意：再减去外层的循环次数，向后依次两两相互比较转换；
				for (let j = 0; j < this.productline.length - i - 1; j++) {
					// 当前一个值大于后一个值
					if (
						this.productline[j].lineName.substr(
							this.productline[j].lineName.length - 1,
							1
						) >
						this.productline[j + 1].lineName.substr(
							this.productline[j + 1].lineName.length - 1,
							1
						)
					) {
						// 定义变量，以赋值的形式前后交换，直到换到最小的在前面，左右再无比较，则循环结束形成排序结果
						let temp = this.productline[j];
						this.productline[j] = this.productline[j + 1];
						this.productline[j + 1] = temp;
					}
				}
			}
			this.productline &&
				this.productline.length > 0 &&
				this.productline.map((item) => {
					if (item.lineName.includes('D')) {
						xData.push(item.lineName);
						outputNum.push(item.outputNum);
						passRate.push(item.passRate);
					}
				});
			if (
				this.chart !== null &&
				this.chart !== '' &&
				this.chart !== undefined
			) {
				this.chart.dispose();
			}
			this.chart = echarts.init(document.getElementById('numRateChart'));
			var option = {
				grid: { top: 82, right: 60, bottom: 20, left: 90 },
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
					className: 'num-rate-chart-tooltip',
				},
				legend: {
					itemWidth: 10,
					itemHeight: 10,
					top: '2.5%',
					right: '20px',
					icon: 'rect',
					data: [
						{ name: '产线产量', itemStyle: { color: '#364BFE' } },
						{ name: '良品率', itemStyle: { color: '#FFCB59' } },
					],
					textStyle: {
						color: '#DFF1FE',
						fontSize: 12,
					},
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						axisPointer: {
							type: 'shadow',
						},
						axisTick: { show: false },
						axisLine: {
							lineStyle: {
								width: 1,
								color: '#213259',
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '产量/片',
						nameTextStyle: {
							color: '#fff',
							fontSize: 10,
							align: 'right',
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#213259',
							},
						},
						splitLine: {
							lineStyle: {
								color: '#213259a0',
							},
						},
					},
					{
						type: 'value',
						name: '良品率',
						nameTextStyle: {
							color: '#fff',
							fontSize: 10,
							align: 'LEFT',
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							formatter: '{value}%',
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#213259',
							},
						},
						splitLine: {
							lineStyle: {
								color: '#213259a0',
							},
						},
					},
				],
				series: [
					{
						name: '产线产量',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value;
							},
						},
						barWidth: 20,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#5CB7FF' },
								{ offset: 1, color: '#364BFE' },
							]),
						},
						data: outputNum,
					},
					{
						name: '良品率',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value ? value + '%' : '-';
							},
						},
						itemStyle: {
							color: '#FFD160',
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#FFCB59' + '40' },
								{ offset: 0.5, color: '#FFCB59' + '20' },
								{ offset: 1, color: '#FFCB59' + '00' },
							]),
						},
						lineStyle: {
							width: 1,
						},
						symbol: 'circle',
						symbolSize: 5,
						data: passRate,
					},
				],
			};
			option && this.chart.setOption(option);
		},
	},
};
</script>
<style scoped lang="scss">
.num-rate-chart {
	width: 100%;
	height: 100%;
	top: -50px;
}
</style>
<style>
.num-rate-chart-tooltip {
	background: #0a2b4f77 !important;
	border: none !important;
	backdrop-filter: blur(12px);
}
.num-rate-chart-tooltip * {
	color: #fff !important;
}
</style>