时长分布 饼图，柱状图高频使用时段分布 ，车位平均占用

pages/index/index.vue

@@ -2,10 +2,14 @@
 	<view>
 		<u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>
 
-		<u-picker v-model="body2data.vue.show" :params="body2data.vue.params" @confirm="body2dataconfirm"
+		<u-picker v-model="body2data.vue.show" :params="body2data.vue.params" 
+		:default-time="body2data.query.startTime"
+		@confirm="body2dataconfirm"
 			mode="time"></u-picker>
 
-		<u-picker v-model="body5data.vue.show" :params="body5data.vue.params" @confirm="body5dataconfirm"
+		<u-picker v-model="body5data.vue.show" 
+		:default-time="body2data.query.queryDate"
+		:params="body5data.vue.params" @confirm="body5dataconfirm"
 			mode="time"></u-picker>
 
 		<view class="navbar">
@@ -69,13 +73,13 @@
 												class="body1pie-num colorAAAAAA">{{body1data.data.useNum}}</span>台
 										</view>
 									</view>
-									<view class="td td3" v-if="false">
+									<view class="td td3" >
 
 										<view class="td td4">公共车位<span
-												class="body1pie-num colorEF8132">{{body1data.data.useNum}}</span>台
+												class="body1pie-num colorEF8132">{{body1data.data1.type1}}</span>台
 										</view>
 										<view class="td td4">私家车位<span
-												class="body1pie-num colorDC4441">{{body1data.data.useNum}}</span>台
+												class="body1pie-num colorDC4441">{{body1data.data1.type2}}</span>台
 										</view>
 									</view>
 								</view>
@@ -137,7 +141,7 @@
 			</view>
 
 
-			<view class="statistics " v-show="companyId&&parkingId==''">
+			<view class="statistics " >
 				<view class="title">
 					<view class="icon">
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
@@ -329,7 +333,7 @@
 									<!-- 
 								 -->
 									<view class="item-title">
-										A01
+										{{item.name}}
 
 									</view>
 									<view class="item-tags">
@@ -431,7 +435,12 @@
 				},
 				body1data: {
 					query: {},
-					data: {}
+					data: {},
+					data1: {}
+				},
+				body4data: {
+					query: {},
+					data: {}
 				},
 				body3data: {
 					query: {},
@@ -560,7 +569,20 @@
 					uni.hideLoading();
 					if (response.data.totalPage) {
 						this.jpContentMap.body7 = 2
-						this.equipmentList = response.data.data
+						this.equipmentList = response.data.data
+						var num1=0
+						var num2=0
+						this.equipmentList.forEach(item=>{
+							if(item.type==1){
+								num1+=1
+							}
+							if(item.type==2){
+								num2+=1
+							}
+						})
+						this.body1data.data1.type1=num1
+						this.body1data.data1.type2=num2
+						
 					} else {
 						this.jpContentMap.body7 = 1
 					}
@@ -588,7 +610,8 @@
 				this.getfloorlockList()
 				this.occupancyByTime(1);
 				this.occupancyByTimeBar(1);
-				this.occupancyByDay(1);
+				this.occupancyByDay(1);
+				this.durationDistribution();
 
 				if (this.parkingId == "") {
 
@@ -757,7 +780,7 @@
 				//this.occupancyByTime();
 
 				//this.getbody3()
-				this.getbody4()
+				//this.getbody4()
 
 				//this.getbody5()
 
@@ -776,7 +799,7 @@
 			},
 			body5dataconfirm(e) {
 				console.log(e)
-				var date = new Date(e.year + "-" + e.month + "-1");
+				var date = new Date(e.year + "-" + e.month + "-"+e.day);
 				this.body5data.query.queryDate = parseUnixTime(date, '{y}-{m}-{d}')
 				this.body5data.vue.queryN = parseUnixTime(date, '{y}年{m}月{d}日');
 
@@ -786,10 +809,10 @@
 				if (init) {
 					var date = new Date();
 
-					this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
+					//this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
 
 					var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
-					this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
+					//this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
 
 				}
 				this.jpContentMap.body3 = 0
@@ -821,6 +844,42 @@
 					})
 
 				})
+			},
+			durationDistribution(){
+				this.jpContentMap.body4 = 0
+				
+				var date = new Date();
+				
+				this.body4data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
+				
+				var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+				this.body4data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
+				
+				
+				
+				this.body4data.query.companyId = this.companyId
+				this.body4data.query.parkingId = this.parkingId
+				API.durationDistribution(
+					this.body4data.query
+				).then((response) => {
+					this.body4data.data = response.data.distribution;
+				
+					if (this.body4data.data.length == 0) {
+						this.jpContentMap.body4 = 1
+				
+					} else {
+						this.jpContentMap.body4 = 2
+						//this.getbody3()
+						this.getbody4()
+					}
+				
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				
+				})
 			},
 			occupancyByDay(init) {
 				if (init) {
@@ -838,7 +897,7 @@
 				).then((response) => {
 					this.body5data.data = [
 						...response.data.locksTimeList,
-						//	...response.data.locksTimeList,
+						
 					];
 
 					if (this.body5data.data.length == 0) {
@@ -902,132 +961,81 @@
 
 				})
 			},
-			getbody5() {
-				var key = "body5echart"
+			getbody5() {
+				// 颜色映射
+				var colorMap = [
+					
+					'#FFA500',
+					'#00FF00',
+					'#F44336',
+					'#E91E63',
+					'#9C27B0',
+					'#673AB7',
+					'#3F51B5',
+					'#2196F3',
+					'#03A9F4',
+					'#00BCD4',
+					'#009688',
+					'#CDDC39',
+					'#FFEB3B',
+					'#FFC107',
+					'#FF9800',
+					'#FF5722',
+					'#795548',
+					'#607D8B'
+				];
+				
+				var key = "body5echart"
+				var dataApi = this.body5data.data;
+				
+				var head = 40 * (parseInt(dataApi.length / 4)) + 20
+				var body =20 * (parseInt(dataApi.length ))
+				
 				var myChart = this.echartsList[key];
 				if (!myChart) {
 					myChart = echarts.init(document.getElementById(key), null, {
 						width: uni.upx2px(300 * 2),
-						height: uni.upx2px(170 * 2)
+						height: uni.upx2px((170 + head) * 2+body)
 					})
 
 				}
 				myChart.clear()
-
-
-				// 数据
-				var data1 = [
-
-					[0, 0, 1], // 1点
-					[1, 0, 1], // 2点
-					[2, 0, 1], // 3点
-
-					[6, 0, 1], // 7点
-					[7, 0, 1], // 8点
-
-				];
-				var data2 = [
-
-					[2, 1, 2], // 3点
-					[3, 1, 2], // 4点
-					[4, 1, 2], // 5点
-					[5, 1, 2], // 6点
-					[6, 1, 2], // 7点
-					[7, 1, 2], // 8点
-					[8, 1, 2], // 9点
-					[9, 1, 2], // 10点
-					[10, 1, 2], // 11点
-					[11, 1, 2] // 12点
-				];
-
-				// 颜色映射
-				var colorMap = [
-					'#ffffff',
-					'#FFA500',
-					'#00FF00',
-					'#F44336',
-					'#E91E63',
-					'#9C27B0',
-					'#673AB7',
-					'#3F51B5',
-					'#2196F3',
-					'#03A9F4',
-					'#00BCD4',
-					'#009688',
-					'#CDDC39',
-					'#FFEB3B',
-					'#FFC107',
-					'#FF9800',
-					'#FF5722',
-					'#795548',
-					'#607D8B'
-				];
-
-				var option = {
-					tooltip: {
-						trigger: 'axis',
-						axisPointer: {
-							type: 'shadow'
-						}
-					},
-					grid: {
-						top: 30,
-						left: -10,
-						right: 0,
-						bottom: 0,
-						containLabel: true
-					},
-					legend: {
-						data: ['A停车场', 'B停车场']
-					},
-					xAxis: {
-						type: 'category',
-						data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点']
-					},
-					yAxis: {
-						type: 'category',
-
-					},
-					series: [{
+				var dataName=[]
+				var dataTime=[]
+				var series=[]
+				var i =0;
+				dataApi.forEach(item => {
+					
+					dataName.push(item.lockName)
+					var itemList=[]
+					var j=0
+					item.timeUseList.forEach(item2=>{
+						
+						Object.keys(item2).forEach(key1 => {
+							console.log(item2[key1])
+							if(item2[key1]){
+								var ob=[j,i,i]
+								itemList.push(ob)
+							}else{
+								// var ob=[j,i,i]
+								// itemList.push(ob)
+							}
+						});
+						j+=1;
+						
+					})
+					
+					
+					var obj={
+						silent: true,
 						type: 'custom',
-						"name": "A停车场",
-						itemStyle: {
-							color: colorMap[1]
+						"name": item.lockName,
+						tooltip:{
+							//trigger: 'none',
+							show:false
 						},
-						renderItem: function(params, api) {
-							var xIndex = api.value(0); // x轴索引
-							var yIndex = api.value(1); // y轴索引
-							var value = api.value(2); // 值
-
-							// 获取颜色
-							var color = colorMap[value] || '#ffffff';
-
-							// 计算矩形的位置和大小
-							var x = api.coord([xIndex, yIndex])[0];
-							var y = api.coord([xIndex, yIndex])[1];
-							var width = api.size([1, 0])[0];
-							var height = api.size([0, 1])[1];
-
-							return {
-								type: 'rect',
-
-								shape: {
-									x: x,
-									y: y - uni.upx2px(40),
-									width: width,
-									height: height - uni.upx2px(30),
-								},
-								style: {
-									fill: color
-								}
-							};
-						},
-						data: data1
-					}, {
-						type: 'custom',
-						"name": "B停车场",
 						itemStyle: {
-							color: colorMap[2]
+							color: colorMap[i%colorMap.length]
 						},
 						renderItem: function(params, api) {
 							var xIndex = api.value(0); // x轴索引
@@ -1035,7 +1043,7 @@
 							var value = api.value(2); // 值
 
 							// 获取颜色
-							var color = colorMap[value] || '#ffffff';
+							var color = colorMap[value%colorMap.length] || '#ffffff';
 
 							// 计算矩形的位置和大小
 							var x = api.coord([xIndex, yIndex])[0];
@@ -1047,22 +1055,60 @@
 								type: 'rect',
 
 								shape: {
-									x: x,
-
-									y: y - uni.upx2px(40),
+									x: x - uni.upx2px(25),
+									y: y - uni.upx2px(20),
 									width: width,
-									height: height - uni.upx2px(30),
+									height: 20,
 								},
 								style: {
 									fill: color
 								}
 							};
 						},
-						data: data2
-					}]
-				};
+						
+					}
+					obj.data=itemList
+					series.push(obj)
+					i+=1;
+					
+				})
+				dataApi[0].timeUseList.forEach(item => {
+				
+					Object.keys(item).forEach(key1 => {
+						dataTime.push(key1)
+					});
+				
+				})
+				
+				var option = {
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow'
+						}
+					},
+					grid: {
+						top: 30 + head,
+						left: -10,
+						right: 0,
+						bottom: 0,
+						containLabel: true
+					},
+					legend: {
+						data:dataName
+					},
+					xAxis: {
+						type: 'category',
+						data: dataTime
+					},
+					yAxis: {
+						type: 'category',
 
+					},
+					series:series
+				};
 
+				
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
@@ -1077,7 +1123,41 @@
 
 				}
 				myChart.clear()
-
+				var dataApi = this.body4data.data;
+				
+				var data=[]
+				var num=0
+				var sum=0
+				Object.keys(dataApi).forEach(key1 => {
+					num+=dataApi[key1]
+				});
+				var i=0
+				Object.keys(dataApi).forEach(key1 => {
+					var value=dataApi[key1]
+					var obj={
+						value: value,
+						name: key1
+					}
+					
+					if(num!=0){
+						var valueInt=parseInt(value/num*100)
+						if(valueInt==0&&value!=0){
+							valueInt=1
+						}
+						sum+=valueInt;
+						
+						if(i==Object.keys(dataApi).length-1){
+							if(sum!=100){
+								valueInt+=(100-sum)
+							}
+						}
+						obj.name+='\n'+(valueInt)+'%'
+					}
+					data.push(obj)
+					i++;
+				});
+				
+				
 
 				var option = {
 
@@ -1093,27 +1173,11 @@
 						type: 'pie',
 						radius: ['80%', '50%'],
 						radius: [45, 60],
-						data: [{
-								value: 1048,
-								name: '0.5小时\n20%'
-							},
-							{
-								value: 735,
-								name: '2小时\n10%'
-							},
-							{
-								value: 580,
-								name: '2-6小时\n30%'
-							},
-							{
-								value: 484,
-								name: '6小时以上\n40%'
-							},
-
-						]
+						data: data
 
 					}]
-				};
+				};
+				console.log(option)
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
@@ -1436,7 +1500,7 @@
 						}
 					}]
 				}
-				console.log(option)
+				
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},