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

<template>
	<div class="yield-rate-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
import { formatDate } from '@/utils'

export default {
	name: 'GasChart',
	mixins: [resize],
	components: {},
	props: {
		chartType: '', // 能源类型
		chartTime: ''
	},
	data() {
		return {
			chart: null
		};
	},
	computed: {
		cutChartDay() {
			return this.$store.state.websocket.cutChartDay
		},
		cutChartWeek() {
			return this.$store.state.websocket.cutChartWeek
		},
		cutChartMonth() {
			return this.$store.state.websocket.cutChartMonth
		},
		cutChartYear() {
			return this.$store.state.websocket.cutChartYear
		}
	},
	watch: {
		cutChartDay: {
			handler(newVal, oldVal) {
				if (this.chartTime === '日') {
					this.updateChart()
				}
			}
		},
		cutChartWeek: {
			handler(newVal, oldVal) {
				if (this.chartTime === '周') {
					this.updateChart()
				}
			}
		},
		cutChartMonth: {
			handler(newVal, oldVal) {
				if (this.chartTime === '月') {
					this.updateChart()
				}
			}
		},
		cutChartYear: {
			handler(newVal, oldVal) {
				if (this.chartTime === '年') {
					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 chartData = []
			let xData = []
			let dayArr = []
			let nightArr = []
			let sumArr = []
			let seriesData = []
			switch(this.chartTime) {
					case '日':
						chartData = this.cutChartDay
						break;
					case '周':
					 chartData = this.cutChartWeek
						break;
					case '月':
					 chartData = this.cutChartMonth
						break;
					case '年':
					 chartData = this.cutChartYear
						break;
					default:
			}
			chartData && chartData.length > 0 && chartData.map(item => {
				if (this.chartTime === '日') {
					xData.push((item.dataTime).slice(11))
				}else{
					xData.push((item.dataTime).slice(0,10))
				}
				dayArr.push(item.day?(item.day * 100).toFixed(2):null)
				nightArr.push(item.night?(item.night * 100).toFixed(2):null)
				sumArr.push(item.sum?(item.sum * 100).toFixed(2):null)
			})
			if (this.chartType) {
				seriesData = [{
					color: '#ff9e00',
					name: '总量',
					data: sumArr,
					type: "line",
					areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#FFCB5940' },
							{ offset: 0.5, color: '#FFCB5920' },
							{ offset: 1, color: '#FFCB5900' },
							]),
					},
					lineStyle: {
							width: 1
					},
					symbolSize: 1,
					emphasis: {
							focus: 'series'
					}
				},
				{
					color: '#08d8cd',
					name: '白班',
					data: dayArr,
					type: "line",
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#12FFF540" },
						{ offset: 0.5, color: "#12FFF520" },
						{ offset: 1, color: "#12FFF510" },
        ]),
					},
					lineStyle: {
							width: 1
					},
					symbolSize: 1,
					emphasis: {
							focus: 'series'
					}
				},
				{
					color: '#0b58ff',
					name: '夜班',
					data: nightArr,
					type: "line",
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#2760FF40" },
						{ offset: 0.5, color: "#2760FF20" },
						{ offset: 1, color: "#2760FF10" },
					]),
					},
					lineStyle: {
							width: 1
					},
					symbolSize: 1,
					emphasis: {
							focus: 'series'
					}
				}]
			}else{
				seriesData = [{
					color: '#ff9e00',
					name: '总量',
					data: sumArr,
					type: "line",
					areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#FFCB5940' },
							{ offset: 0.5, color: '#FFCB5920' },
							{ offset: 1, color: '#FFCB5900' },
							]),
					},
					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 = {
				grid: { top: 15, right: 12, bottom: 45, left: 60 },
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						color: "#fff",
						fontSize: 10,
						rotate: 25,
						margin: 13,
					},
					axisTick: { show: false },
					axisLine: {
						lineStyle: {
							width: 1,
							color: '#213259',
						},
					},
				},
				yAxis: {
					nameTextStyle: {
						color: '#fff',
						fontSize: 10,
						align: 'right',
					},
					type: 'value',
					axisLabel: {
						color: "#fff",
						fontSize: 12,
						formatter: "{value} %",
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#213259',
						},
					},
					splitLine: {
						lineStyle: {
							color: '#213259a0',
						},
					},
					interval: 10,
					min: 0,
					max: 100,
				},
				series: seriesData,
				tooltip: {
					trigger: 'axis',
					className: "yield-rate-tooltip"
				},
			}
			option && this.chart.setOption(option)
		},
		getXdata() {
			const today = new Date();
			const currentYear = today.getFullYear();
			const currentMonth = today.getMonth() + 1;
			let days = 30;
			if (this.chartTime === '周') {
				return 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()
			}else if (this.chartTime == "月") {
				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
					days = 31;
				} else if (currentMonth == 2) {
					days = this.isLeapYear(currentYear) ? 29 : 28;
				}
				return Array(days)
						.fill(1)
						.map((_, index) => {
							return `${currentMonth}.${days - index}`;}).reverse()
			} else {
				return Array(12)
						.fill(1)
						.map((_, index) => {
							return `${currentYear}.${12 - index}`;}).reverse()
			}
		},
		isLeapYear(year) {
			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
		}
	},
};
</script>

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