jp-housekeep-electric/pages/equipmentDataMonitoring/chartYoY.vue

<template>
	<view>
		<u-navbar :title="title" title-color="#101010">
		</u-navbar>

		<u-picker-select :noselect="false" @confirm="selector2confirm" @reset="selector2reset" :defaultTime="queryDate"
			title="日期选择" v-model="show" mode="time" :params="params"></u-picker-select>
			
		<view class="main">
 			 
			<view class="title">

				<view class="text">

					<view class="icon">

					</view>
					<span>
						同比分析-每月用电量(kW·h)

					</span>

				</view>

			</view>
			<view class="chat">
				<view id="barEcharts1" style="min-height:440rpx;">

				</view>
			</view>
			<view v-html="description">
				
			</view>
		</view>
		<view class="main">
			<view class="title">

				<view class="text">

					<view class="icon">

					</view>
					<span>
						同比分析-每小时用电量(kW·h)

					</span>

				</view>
				<view class="text1" @click="show=true">
					{{queryDate==nowDate?'今日':queryDateStr}}<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="chat">
				<view id="barEcharts2" style="min-height:440rpx;">

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/electricityMeter.js'
	import * as echarts from 'echarts';
	import {
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '@/apis/utils'

	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				meterNo: '',
				type: '',
				typeName: '',
				nowDate: "",
				queryDate: "",
				queryDateStr: "",
				showlist1: [],
				graphMap: {},
				graphMap2: {},
				description: "",
				timeList1: [],
				timeList2: [],
				nowYear: '',
				title:"",
			}
		},
		onLoad(op) {
			this.meterNo = op.id
			//this.type=op.type
			//this.typeName=op.typeName
			this.title=op.title
			this.nowDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
			this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}年{m}月{d}日');
			
			this.nowYear = new Date().getFullYear()
			this.showlist1 = [this.nowYear, this.nowYear - 1];


			this.electricityMonthTB()
			this.electricityHourByYear()
		},
		methods: {
			selector2reset(e){
				this.queryDate = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}年{m}月{d}日');
				this.electricityHourByYear()
			},
			selector2confirm(e){
				this.queryDate=e.year+"-"+e.month+'-'+e.day	
				this.queryDateStr = parseUnixTime(new Date(this.queryDate), '{y}年{m}月{d}日');
				
				this.electricityHourByYear()
			},
			
			electricityMonthTB() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.electricityMonthTB({
					queryDate: this.queryDate,
					meterId: this.meterNo,

				}).then(response => {
					uni.hideLoading();

					this.description = response.data.description;
					this.graphMap = response.data.graphMap
					this.setMap1();
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			electricityHourByYear() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.electricityHourByYear({
					queryDate: this.queryDate,
					meterId: this.meterNo,

				}).then(response => {
					uni.hideLoading();

					this.graphMap2 = response.data.graphMap
					this.setMap2();

				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			setMap2() {
				this.timeList2 = [];
				for (var i in this.graphMap2) {

					this.timeList2.push(parseInt(i) + '时')
				}

				var list1 = [];
				var list2 = [];
				// var list= this.setSz2(this.graphMap2,'bar')
				// this.echarts2('kwPicture2',list);

				var list = this.setSz(this.graphMap2, 'line')
				this.echarts1('barEcharts2', list, this.timeList2);
			},
			setMap1() {

				for (var i in this.graphMap) {

					this.timeList1.push(parseInt(i) + 1 + '月')
				}

				var list1 = [];
				var list2 = [];
				var list = this.setSz(this.graphMap, 'line')
				console.log(list)
				this.echarts1('barEcharts1', list, this.timeList1);


			},
			setSz(energyCenterMapObj, type) {
				var ap = {
					name: this.nowYear,
					type: type,
					symbol: 'circle',
					// sampling: 'lttb',
					data: []
				}
				var ap2 = {
					name: this.nowYear - 1,
					type: type,
					symbol: 'circle',
					// sampling: 'lttb',
					data: []
				}
				for (var i in energyCenterMapObj) {
					var sz = energyCenterMapObj[i];

					ap.data.push((sz[0]))
					ap2.data.push((sz[1]))

				}

				return [ap, ap2]

			},
			setSz2(energyCenterMapObj, type) {
				var returnsz = [];

				for (var i in energyCenterMapObj) {
					var sz = energyCenterMapObj[i];

					//var obj=[i+'时',sz[0].toFixed(0),sz[1].toFixed(0)]
					var obj = [i + '时', parseInt(sz[0]), parseInt(sz[1]), parseInt(sz[2])]

					returnsz.push(obj)
				}

				return returnsz;

			},
			echarts1(className, seriesdata, timeList) {
				var colorName = "#333"


				var myChart = echarts.init(document.getElementById(className), 'light');
				myChart.clear()
				var option = {

					tooltip: {
						trigger: 'axis',
						borderColor: "#F0F0F0",
						borderWidth: 1,
						backgroundColor: "#ffffff",
						textStyle: {
							color: "#333"
						}
					},
					legend: {
						data: [this.nowYear + '', this.nowYear - 1 + '', ],
						textStyle: {
							color: colorName
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '5%',
						containLabel: true
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: timeList,
						axisLabel: {
							textStyle: {
								color: colorName
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: colorName
							}
						},
					},
					yAxis: {
						type: 'value',

						axisLabel: {
							textStyle: {
								color: colorName
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: colorName
							}
						},
					},
					// dataZoom: [{
					// 		type: 'inside',
					// 		start: 0,
					// 		end: 100
					// 	},
					// 	{
					// 		start: 0,
					// 		end: 100
					// 	}
					// ],
					series: seriesdata
				};

				myChart.setOption(option);
			},
			echarts2(className, seriesdata) {
				var colorName = "#333"


				var myChart = echarts.init(document.getElementById(className), 'light');
				myChart.clear()
				var option = {
					dataset: {

						source: [
							['product', this.nowYear + '', this.nowYear - 1 + '', ],
							...seriesdata
						]
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '15%',
						containLabel: true
					},
					legend: {

					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						type: 'category',

					},
					yAxis: {

					},
					// dataZoom: [{
					// 		type: 'inside',
					// 		start: 0,
					// 		end: 100
					// 	},
					// 	{
					// 		start: 0,
					// 		end: 100
					// 	}
					// ],

					series: [{
						type: 'bar'
					}, {
						type: 'bar'
					}]

				};

				myChart.setOption(option);
			}
		}
	}
</script>


<style lang="scss" scoped>
	// page {
	// 	background-color: #fff;
	// }

	.slot {
		display: flex;
		align-items: center;

		.img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 4rpx;
		}
	}

	.main {
		background-color: #fff;
		padding: 32rpx;
		margin-bottom: 30rpx;
		.title {

			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			.icon {
				width: 8rpx;
				height: 32rpx;
					margin-right: 8rpx;
				background-color: rgba(22, 119, 255, 1);
			}
		 
			.text {
				display: flex;
				align-items: center;
				color: rgb(16, 16, 16);
				font-size: 36rpx;
				margin-left: 12rpx;
				font-weight: bold;
			}
		}

		.chat {
			width: 100%;
			//height: 480rpx;
			margin-top: 32rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		// 表格
		.table {
			margin-top: 60rpx;
			border-radius: 8px;

			z-index: 999;

			table {
				background-color: #f1f2f5;
				color: #101010;
				padding: 20rpx 10rpx;

				width: 100%;

				td {
					text-align: right;
				}
			}
		}
	}
</style>