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

<!-- 
    filename: GasChart.vue
    author: liubin
    date: 2023-12-12 10:53:49
    description: 
-->

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

<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'

export default {
	name: 'GasChart',
	mixins: [resize],
	components: {},
	props: {
		chartType: '', // 能源类型
		chartTime: ''
	},
	data() {
		const colors = [
			'#12FFF5',
			'#2760FF',
			'#FFD160',
			'#E80091',
			'#8064ff',
			'#ff8a3b',
			'#8cd26d',
			'#2aa1ff',
		];
		return {
			chart: null
		};
	},
	computed: {
		gasChartMsg() {
			return this.$store.state.websocket.sumGasInfo
		},
		energyWeekTrend() {
			return this.$store.state.websocket.energyWeekTrend
		},
		energyMonthTrend() {
			return this.$store.state.websocket.energyMonthTrend
		},
		energyYearTrend() {
			return this.$store.state.websocket.energyYearTrend
		}
	},
	watch: {
		energyWeekTrend: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				if (this.chartTime === '周' && this.chartType === '电耗能') {
					this.updateChart()
				}
			}
		},
		energyMonthTrend: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				if (this.chartTime === '月' && this.chartType === '电耗能') {
					this.updateChart()
				}
			}
		},
		energyYearTrend: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				if (this.chartTime === '年' && this.chartType === '电耗能') {
					this.updateChart()
				}
			}
		},
		chartTime: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		},
		chartType: {// 监听能源类型变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		}
	},
	mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
	methods: {
		updateChart() {
			let gasName  = ''
			const colors = ['#FFCB59'];
			let temp = []
			let seriesData = []
			let xData = []
			let yData = []
			switch (this.chartType) {
				case '电耗能':{
					gasName = '电耗能'
					if (this.chartTime === '周') {
						temp = this.energyWeekTrend || []
					}else if(this.chartTime === '月') {
						temp = this.energyMonthTrend || []
					}else{
						temp = this.energyYearTrend || []
					}
					temp && temp.map(i => {
						xData.push(i.time)
						yData.push(i.qty)
					})
					break;
				}
				case '天然气I':{
					yData = this.gasChartMsg.hisSumGas1 || []
					gasName = '天然气I'
					xData = Array(7)
						.fill(1)
						.map((_, index) => {
							const today = new Date();
							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
								dtimestamp
							).getDate()}`;
						})
						.reverse()
					break;
				}
				default:
				gasName = '天然气II'
				yData = this.gasChartMsg.hisSumGas2 || []
				xData = Array(7)
						.fill(1)
						.map((_, index) => {
							const today = new Date();
							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
								dtimestamp
							).getDate()}`;
						})
						.reverse()
			}
			if (yData.length == 0) {
				seriesData = []
			}else {
				seriesData = [{
					name: gasName,
					data: yData,
					type: "line",
					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
					},
					symbolSize: 1,
					emphasis: {
							focus: 'series'
					}
				}]
					
			}
			// 绘图
			if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
			this.chart = echarts.init(this.$el);
			var option = {
				color: colors,
				grid: { top: 32, right: 12, bottom: 20, left: 48 },
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisTick: { show: false },
					axisLine: {
						lineStyle: {
							width: 1,
							color: '#213259',
						},
					},
				},
				yAxis: {
					name: '单位m³/h',
					nameTextStyle: {
						color: '#fff',
						fontSize: 10,
						align: 'right',
					},
					type: 'value',
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#213259',
						},
					},
					splitLine: {
						lineStyle: {
							color: '#213259a0',
						},
					},
				},
				series: seriesData,
				tooltip: {
					trigger: 'axis',
				},
			}
			option && this.chart.setOption(option)
		}
	},
};
</script>

<style scoped lang="scss">
.gas-chart {
	width: 100%;
	height: 100%;
}
</style>