更新

src/views/core/analysis/yieldAnalysis-handle/LineChart.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-09-13 09:02:25
+ * @LastEditTime: 2026-03-18 14:45:07
+ * @LastEditors: zwq
+ * @Description:
+-->
+<template>
+	<div :class="className" :style="{ height: height, width: width }" />
+</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,
+		};
+	},
+	// watch: {
+	//   chartData: {
+	//     deep: true,
+	//     handler(val) {
+	//       this.setOptions(val)
+	//     }
+	//   }
+	// },
+	mounted() {
+		// this.$nextTick(() => {
+		//   this.initChart()
+		// })
+	},
+	// beforeDestroy() {
+	//   if (!this.chart) {
+	//     return
+	//   }
+	//   this.chart.dispose()
+	//   this.chart = null
+	// },
+	methods: {
+		initChart(xData, yData, lineName) {
+			this.chart = echarts.init(this.$el, 'macarons');
+			this.setOptions(xData, yData, lineName);
+		},
+		setOptions(xData, yData, lineName) {
+			let seriesData = [];
+			lineName.forEach((item, index) => {
+				seriesData.push(
+					{
+						name: item + '白班',
+						data: yData[index].map(item => item.day),
+						type: 'line',
+					},
+					{
+						name: item + '夜班',
+						data: yData[index].map(item => item.night),
+						type: 'line',
+					}
+				);
+			});
+			const result = lineName.flatMap((item) => [item + '白班', item + '夜班']);
+			this.chart.setOption(
+				{
+					xAxis: {
+						type: 'category',
+						data: xData,
+					},
+					legend: {
+						data: result,
+					},
+					yAxis: {
+						type: 'value',
+					},
+					series: seriesData,
+				},
+				true
+			);
+		},
+	},
+};
+</script>