yudao-dev/src/views/core/analysis/balanceAnalysis/chart.vue

<!-- 
    filename: chart.vue
    author: liubin
    date: 2023-11-29 09:03:01
    description: 
-->

<template>
	<div class="analysis-chart">
		<!-- tt ct 选择  -->
		<el-button
			v-for="(item, index) in ['设备CT', '设备TT', '产线CT', '产线TT']"
			:key="index"
			:class="[index == activeIndex ? 'activeButton' : '']"
			@click="activeIndex = index">
			{{ item }}
		</el-button>
		<!-- chart  -->
		<div id="chart" ref="chartDiv" class="chart" style="margin-top: 12px" />
	</div>
</template>

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

export default {
	name: 'AnalysisChart',
	components: {},
	props: ['daterange', 'tableData'],
	data() {
		return {
			activeIndex: 0,
			chart: null,
			templateOption: {
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					icon: 'roundRect',
					itemWidth: 12,
					itemHeight: 12,
				},
				grid: {
					top: '12%',
					left: '6%',
					right: '6%',
					bottom: '12%',
				},
				xAxis: {
					name: '时间',
					axisLabel: {
						margin: 12,
						rotate: -8,
					},
					axisTicks: {
						show: false,
					},
					data: this.daterange || [
						'2020-01-02',
						'2020-02-02',
						'2020-03-02',
						'2020-04-02',
					],
				},
				yAxis: {
					name: ['设备CT', '设备TT', '产线CT', '产线TT'][this.activeIndex],
					nameLocation: 'end',
					nameGap: 28,
					nameTextStyle: {
						fontSize: 14,
						align: 'right',
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#333',
							opacity: 0.6,
						},
					},
				},
				series: [
					{
						name: 'der Hund',
						type: 'line',
						data: [15, undefined, 36, 11],
					},
					{
						name: 'die Katze',
						type: 'line',
						data: [5, 2, 6, 3],
					},
					{
						name: 'die Maus',
						type: 'line',
						data: [11, 12, 13, 10],
					},
				],
			},
		};
	},
	mounted() {
		this.initChart();
	},
	deactivated() {},
	watch: {
		activeIndex(val) {
			this.initChart(val);
		},
	},
	methods: {
		/**
		 *
		 * @param {object} row 表格的每一列
		 * @param {string} key 表格列prop的后缀
		 */
		getListFromTableRow(row, key = '_eq_ct') {
			const list = [];
			for (const prop of Object.keys(row).sort()) {
				if (prop.endsWith(key)) {
					list.push(row[prop]);
				}
			}
			return list;
		},
		/** 初始化/设置 图表 */
		initChart(val) {
			console.log('tableData', this.tableData);
			if (!this.chart) this.chart = echarts.init(this.$refs.chartDiv);
			switch (val) {
				case 0:
					const eqCt = this.tableData.map((row) => ({
						name: row.equName,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						data: this.getListFromTableRow(row, '_eq_ct'),
					}));
					this.chart.setOption({
						...this.templateOption,
						yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
						series: eqCt,
					});
					break;
				case 1:
					const eqTt = this.tableData.map((row) => ({
						name: row.equName,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						data: this.getListFromTableRow(row, '_eq_tt'),
					}));
					this.chart.setOption({
						...this.templateOption,
						yAxis: { ...this.templateOption.yAxis, name: '设备TT' },
						series: eqTt,
					});
					break;
				case 2:
					const plCt = this.tableData.map((row) => ({
						name: row.equName,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						data: this.getListFromTableRow(row, '_pl_ct'),
					}));
					this.chart.setOption({
						...this.templateOption,
						yAxis: { ...this.templateOption.yAxis, name: '产线CT' },
						series: plCt,
					});
					break;
				case 3:
					const plTt = this.tableData.map((row) => ({
						name: row.equName,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						data: this.getListFromTableRow(row, '_pl_tt'),
					}));
					this.chart.setOption({
						...this.templateOption,
						yAxis: { ...this.templateOption.yAxis, name: '产线TT' },
						series: plTt,
					});
					break;
				default:
					const eqCt2 = this.tableData.map((row) => ({
						name: row.equName,
						type: 'line',
						symbol: 'circle',
						symbolSize: 8,
						data: this.getListFromTableRow(row, '_eq_ct'),
					}));
					this.chart.setOption({
						...this.templateOption,
						yAxis: { ...this.templateOption.yAxis, name: '设备CT' },
						series: eqCt2,
					});
			}
		},
	},
};
</script>

<style scoped>
.analysis-chart {
	width: 100%;
	height: 100%;
}

.analysis-chart >>> .el-button {
	background: #f1f1f1;
	color: #333;
	transition: all 0.3s;
	border: none;

	&.activeButton,
	&:hover {
		background: #0b58ff;
		color: #fff;
	}
}

#chart {
	height: 100%;
	/* background: #ccc; */
}
</style>