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

<template>
	<div>
		<NotMsg v-show="notMsg"/>
		<div id='flueGasChart' class="flue-gas-chart" style="width:575px;height:250px;" 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: 'FlueGasChart',
	mixins: [resize],
	components:{ NotMsg },
	props: {
		chartType: '',
		chartTime: ''
	},
	data() {
		const colors = [
			'#12FFF5',
			'#2760FF',
			'#FFD160',
			'#E80091',
			'#8064ff',
			'#ff8a3b',
			'#8cd26d',
			'#2aa1ff',
		];
		return {
			chart: null,
			notMsg:false
		};
	},
	computed: {
		gasChartDayTrend() {
			return this.$store.state.websocket.gasChartDayTrend
		},
		gasChartWeekTrend() {
			return this.$store.state.websocket.gasChartWeekTrend
		},
		gasChartMonthTrend() {
			return this.$store.state.websocket.gasChartMonthTrend
		},
		gasChartYearTrend() {
			return this.$store.state.websocket.gasChartYearTrend
		}
	},
	watch: {
		gasChartDayTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '日') {
					this.updateChart()
					this.$emit('emitFun')
				}
			}
		},
		gasChartWeekTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '周') {
					this.updateChart()
					this.$emit('emitFun')
				}
			}
		},
		gasChartMonthTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '月') {
					this.updateChart()
					this.$emit('emitFun')
				}
			}
		},
		gasChartYearTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '年') {
					this.updateChart()
					this.$emit('emitFun')
				}
			}
		},
		chartType: {// 监听类型变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		},
		chartTime: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		}
	},
	mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
	methods: {
		updateChart() {
			let gasName  = ''
			const colors = ['#FFCB59'];
			let temp1 = []
			let temp2 = []
			let seriesData = []
			let xData = []
			let yData = []
			switch (this.chartTime) {
				case '日':{
					temp1 = this.gasChartDayTrend
					break;
				}
				case '周':{
					temp1 = this.gasChartWeekTrend
					break;
				}
				case '月':{
					temp1 = this.gasChartMonthTrend
					break;
				}
				case '年':{
					temp1 = this.gasChartYearTrend
					break;
				}
				default:
			}
			switch (this.chartType) {
				case '氧气含量':{
					temp2 = temp1?.O2_float || []
					break;
				}
				case '二氧化硫':{
					temp2 = temp1?.SO2_float || []
					break;
				}
				case '氮氧化物':{
					temp2 = temp1?.NOX_float || []
					break;
				}
				case '颗粒物':{
					temp2 = temp1?.dust_float || []
					break;
				}
				default:
			}
			if (temp2.length === 0) {
         this.notMsg = true
         return
      } else {
        this.notMsg = false
      }
			temp2.map(i => {
				xData.push(i.time)
				yData.push((i.value)?(Number(i.value)).toFixed(2):null)
			})
			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
					},
					symbol: 'circle',
					symbolSize: 5,
					emphasis: {
							focus: 'series'
					}
				}]
					
			}
			// 绘图
			if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
			this.chart = echarts.init(document.getElementById('flueGasChart'));
			var option = {
				color: colors,
				grid: { top: 32, right: 12, bottom: 20, left: 60 },
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisTick: { show: false },
					axisLine: {
						lineStyle: {
							width: 1,
							color: '#213259',
						},
					},
				},
				yAxis: {
					name: this.chartType === '氧气含量' ? '单位%':'单位mg/m³',
					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',
					className: "gas-chart-tooltip"
				},
			}
			option && this.chart.setOption(option)
		}
	},
};
</script>

<style scoped lang="scss">
.flue-gas-chart {
	width: 100%;
	height: 100%;
}
</style>
<style>
  .gas-chart-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .gas-chart-tooltip * {
    color: #fff !important;
  }
</style>