模块开发 echarts

components/JPcontent.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="content"  >
+	<view class="contentBody"  >
 		<view v-show="status==0" style="display: flex;justify-content: center;margin: 40px 0;" >
 			
 			<view class="uni-toast" style="display: flex;font-size: 60rpx;    color: rgb(192, 196, 204);" >
@@ -25,7 +25,7 @@
 <script>
 
 	export default {
-		name:"content",
+		name:"contentBody",
 		props:{
 			status: {
 				type: Number,

pages/index/index.vue

@@ -23,7 +23,7 @@
 
 				</view>
 
-				<view class="content">
+				<view class="contentBody">
 					<jpContent :status="jpContentMap.body1">
 						<view class="body1pie-table">
 							<view class="tr">
@@ -91,6 +91,120 @@
 						</view>
 					</jpContent>
 				</view>
+			</view>
+			
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>用户停留时长分群特征</view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body5">
+						<view class="body5main">
+							
+							<view id="body5echart" class="body5class">
+							
+							</view>
+							
+						</view>
+					
+			
+						
+					</jpContent>
+				</view>
+			</view>
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>车位平均占用率(%)</view>
+						<view class="tag">2025年1月<u-icon  name="arrow-down"></u-icon></view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body2">
+						<view class="body2lineChart">
+							
+							<view id="body2line1" class="body2line">
+							
+							</view>
+							
+						</view>
+					
+			
+						
+					</jpContent>
+				</view>
+			</view>
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>高频使用时段分布</view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body3">
+						<view class="body3barChart">
+							
+							<view id="body3bar1" class="body3bar">
+							
+							</view>
+							
+						</view>
+					
+			
+						
+					</jpContent>
+				</view>
+			</view>
+			
+			<view class="statistics ">
+				<view class="title">
+					<view class="icon">
+						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						<view>用户停留时长分群特征</view>
+						
+					</view>
+			
+				</view>
+			
+				<view class="contentBody">
+					<jpContent :status="jpContentMap.body4">
+						<view class="body4pieChart">
+							
+							<view id="body4pie1" class="body4pie">
+							
+							</view>
+							
+						</view>
+					
+			
+						
+					</jpContent>
+				</view>
 			</view>
 
 		</view>
@@ -118,7 +232,16 @@
 
 				},
 				jpContentMap: {
-					body1: 2
+					body1: 2,
+					body2: 2,
+					body3: 2,
+					body4: 2,
+					body5: 2,
+					body6: 2,
+					body7: 2,
+					body8: 2,
+					body9: 2,
+					body10: 2,
 				}
 			}
 		},
@@ -128,7 +251,291 @@
 		onReady() {
 			this.getfindByOpenId();
 		},
-		methods: {
+		methods: {
+			init() {
+				// this.getbody2()
+				// this.getbody3()
+				// this.getbody4()
+				
+				this.getbody5()
+				
+				// this.getbody1pie1()
+				// this.getbody1pie2()
+				// this.getbody1pie3()
+			},
+			getbody5(){
+				var key = "body5echart"
+				var myChart = this.echartsList[key];
+				if (!myChart) {
+					myChart = echarts.init(document.getElementById(key), null, {
+						width: uni.upx2px(300*2),
+						height: uni.upx2px(170*2)
+					})
+				
+				}
+				myChart.clear()
+				
+				 
+				 // 数据
+				        var data = [
+				            // A停车场 1-3点有人
+				            [0, 0, 1], // 1点
+				            [1, 0, 1], // 2点
+				            [2, 0, 1], // 3点
+				            // A停车场 7-8点有人
+				            [6, 0, 1], // 7点
+				            [7, 0, 1], // 8点
+				            // B停车场 3-12点有人
+				            [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 = {
+				            0: '#ffffff', // 无人
+				            1: '#FFA500', // A停车场
+				            2: '#00FF00'  // B停车场
+				        };
+				
+				        var option = {
+							 grid: {
+							 	top: 20,
+							 	left: 0,
+							 	right: 0,
+							 	bottom: 0,
+							 	containLabel: true
+							 },
+				            xAxis: {
+				                type: 'category',
+				                data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点']
+				            },
+				            yAxis: {
+				                type: 'category',
+				                data: ['A停车场', 'B停车场']
+				            },
+				            series: [{
+				                type: 'custom',
+				                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,
+				                            width: width,
+				                            height: height/2
+				                        },
+				                        style: {
+				                            fill: color
+				                        }
+				                    };
+				                },
+				                data: data
+				            }]
+				        };
+
+		
+				myChart.setOption(option);
+				this.echartsList[key] = myChart;
+			},
+			getbody4(){
+				var key = "body4pie1"
+				var myChart = this.echartsList[key];
+				if (!myChart) {
+					myChart = echarts.init(document.getElementById(key), null, {
+						width: uni.upx2px(300*2),
+						height: uni.upx2px(170*2)
+					})
+				
+				}
+				myChart.clear()
+				
+				 
+				var option = {
+				   
+				  grid: {
+				  	top: 20,
+				  	left: 0,
+				  	right: 0,
+				  	bottom: 0,
+				  	containLabel: true
+				  },
+				  series: [
+				      {
+				       
+				        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%' },
+				         
+				        ]
+				      
+				      }
+				    ]
+				};
+				myChart.setOption(option);
+				this.echartsList[key] = myChart;
+			},
+			getbody3(){
+				var key = "body3bar1"
+				var myChart = this.echartsList[key];
+				if (!myChart) {
+					myChart = echarts.init(document.getElementById(key), null, {
+						width: uni.upx2px(300*2),
+						height: uni.upx2px(170*2)
+					})
+				
+				}
+				myChart.clear()
+				
+				var data1=['0-7点', '7-14点', '14-24点']
+				var axisLabel=  {
+					rotate: 40,
+					interval: 0,
+					textStyle: {
+						color: "#333"
+					}
+				}
+				if (data1.length < 7) {
+					axisLabel = {
+						interval: 0,
+						textStyle: {
+							color: "#333"
+						},
+					}
+				} else {
+					axisLabel.interval = 0;
+				}
+				var option = {
+				  xAxis: {
+					type: 'category',
+					data: data1,
+					axisLabel: axisLabel,
+				  },
+				  tooltip: {
+				  	trigger: 'axis',
+				  	axisPointer: {
+				  		type: 'shadow'
+				  	}
+				  },
+				  yAxis: {
+					type: 'value'
+				  },
+				  grid: {
+				  	top: 20,
+				  	left: 0,
+				  	right: 0,
+				  	bottom: 0,
+				  	containLabel: true
+				  },
+				  series: [
+				     {
+						 itemStyle:{
+						 	color:"#5A88E5"
+						 },
+				       data: [120, 200, 150],
+				       type: 'bar'
+				     }
+				   ]
+				};
+				myChart.setOption(option);
+				this.echartsList[key] = myChart;
+			},
+			getbody2(){
+				var key = "body2line1"
+				var myChart = this.echartsList[key];
+				if (!myChart) {
+					myChart = echarts.init(document.getElementById(key), null, {
+						width: uni.upx2px(300*2),
+						height: uni.upx2px(170*2)
+					})
+				
+				}
+				myChart.clear()
+				var data1=['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点'
+					, '12-14点', '14-16点', '16-18点', '18-20点', '20-22点', '22-24点']
+				var axisLabel=  {
+					rotate: 40,
+					interval: 0,
+					textStyle: {
+						color: "#333"
+					}
+				}
+				if (data1.length < 7) {
+					axisLabel = {
+						interval: 0,
+						textStyle: {
+							color: "#333"
+						},
+					}
+				} else {
+					axisLabel.interval = 0;
+				}
+				var option = {
+				  xAxis: {
+					type: 'category',
+					data: data1,
+					axisLabel: axisLabel,
+				  },
+				  tooltip: {
+				  	trigger: 'axis',
+				  	axisPointer: {
+				  		type: 'shadow'
+				  	}
+				  },
+				  yAxis: {
+					type: 'value'
+				  },
+				  grid: {
+				  	top: 20,
+				  	left: 0,
+				  	right: 0,
+				  	bottom: 0,
+				  	containLabel: true
+				  },
+				  series: [
+					{
+						 areaStyle: {},
+						 itemStyle:{
+						 	color:"#BBD4FB"
+						 },
+						 label: {
+						        show: true,
+						        position: 'top',
+								color:"#307AF6"
+						      },
+					  data: [50, 30, 24, 18, 35, 47,50, 30, 24, 28, 35, 47 ],
+					  type: 'line'
+					}
+				  ]
+				};
+				myChart.setOption(option);
+				this.echartsList[key] = myChart;
+			},
 			getbody1pie1() {
 				var img=require("@/assets/img/index/pie1-1.svg")
 				var key = "body1pie1"
@@ -307,11 +714,7 @@
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
-			init() {
-				this.getbody1pie1()
-				this.getbody1pie2()
-				this.getbody1pie3()
-			},
+			
 			getfindByOpenId() {
 				uni.showLoading({
 					title: "加载中",
@@ -470,8 +873,21 @@
 				.text {
 					color: rgba(16, 16, 16, 1);
 					font-size: 36rpx;
-					margin-left: 16rpx;
-					font-weight: bold;
+					margin-left: 16rpx;
+					display: flex;
+					justify-content: space-between;
+					    align-items: center;
+						width: 100%;
+					.tag{
+						border-radius: 4px;
+						border: 1px solid rgba(187,187,187,1);
+						color: rgba(51,51,51,1);
+
+						font-size: 24rpx;
+						padding:1px 8rpx;
+						margin-left: 8rpx;
+					}
+					
 				}
 
 				.change {