yudao-dev/src/views/core/analysis/balanceChart.vue

<!--
 * @Author: zhp
 * @Date: 2023-09-13 09:02:25
 * @LastEditTime: 2023-11-10 10:48:09
 * @LastEditors: DY
 * @Description:
-->
<template>
	<div class="balace-chart">
		<div style="margin: 20px">
			<el-button
				v-for="(item, index) in buttonList"
				:key="index"
				:class="[item.actived ? 'activeButton' : '']"
				@click="changeChart(index)">
				{{ item.name }}
			</el-button>
		</div>
		<div
			id="chart"
			ref="chartDiv"
			:class="className"
			:style="{ height: height, width: width }" />
	</div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
// import resize from './mixins/resize'

export default {
	// mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '350px',
		},
		// autoResize: {
		//   type: Boolean,
		//   default: true
		// }
	},
	data() {
		return {
			chart: null,
			dataArray: [],
			xDatas: [],
			buttonList: [],
		};
	},
	mounted() {
		// this.initChart()
		this.$nextTick(() => {
			this.changeChart(0);
		});
	},
	methods: {
		changeChart(index) {
			this.setOptions(this.xDatas, this.dataArray[index]);
			this.buttonList.forEach((item, s) => {
				if (index === s) {
					// item.actived = true
					this.$nextTick(() => {
						// item.actived = true
						this.$set(item, 'actived', true);
					});
				} else {
					// item.actived = false
					this.$nextTick(() => {
						// item.actived = false
						this.$set(item, 'actived', false);
					});
					// this.$set(item, 'actived', false)
				}
			});
			console.log('看一下数22222据', this.dataArray);
		},
		initChart(xData, yData, lineName) {
			this.dataArray = yData;
			this.buttonList = this.dataArray.map((item, index) => {
				return {
					name: item.name,
					actived: index === 0 ? true : false,
				};
			});
			console.log('看一下数据', this.dataArray);
			this.xDatas = xData;
			this.chart = echarts.init(this.$refs.chartDiv, 'macarons');
			// this.chart = echarts.init(document.getElementById('chart'), 'macarons')
			// this.setOptions(xData, yData[0], lineName)
		},
		setOptions(xData, dataList, lineName) {
			// let seriesData = []
			// lineName.forEach((item,index) => {
			//   seriesData.push({
			//     name: item,
			//     data: yData[index],
			//     type: 'line',
			//   })
			// })
			this.chart.setOption({
				xAxis: {
					type: 'category',
					data: xData,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: lineName,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '设备CT',
						data: dataList.eqData,
						type: 'line',
					},
					{
						name: '产线CT',
						data: dataList.plData,
						type: 'line',
					},
				],
			});
		},
	},
};
</script>

<style scoped>
.balace-chart >>> .el-button {
	background: #e3e3e3;
	color: #333;
	transition: all 0.3s;
	border: none;

	&.activeButton,
	&:hover {
		background: #0b58ff;
		color: #fff;
	}
}
</style>