diff --git a/package-lock.json b/package-lock.json
index dcef9b6..e79f5f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "echarts": "^5.5.1",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -2313,6 +2314,7 @@
       "version": "5.5.1",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
       "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "5.6.0"
@@ -4268,6 +4270,51 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/package.json b/package.json
index c57343a..f7be502 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "echarts": "^5.5.1",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/src/assets/images/t-ico-1.png b/src/assets/images/t-ico-1.png
new file mode 100644
index 0000000..f018953
Binary files /dev/null and b/src/assets/images/t-ico-1.png differ
diff --git a/src/assets/images/t-title-bg.png b/src/assets/images/t-title-bg.png
new file mode 100644
index 0000000..0767e90
Binary files /dev/null and b/src/assets/images/t-title-bg.png differ
diff --git a/src/views/home/components/box-4.vue b/src/views/home/components/box-4.vue
index e69de29..912472d 100644
--- a/src/views/home/components/box-4.vue
+++ b/src/views/home/components/box-4.vue
@@ -0,0 +1,329 @@
+<template>
+	<div class="box-4-content">
+		<div class="content-1 content">
+			<!-- 1 -->
+			<div class="title">
+				游客画像
+			</div>
+			<!-- 2 -->
+			<div class="all-man">
+				
+			</div>
+			<ul class="ul-1">
+				<li class="li ">
+					<div class="li-title">
+						<span>年龄性别占比</span>
+					</div>
+					<div class="chart-1">
+						<v-chart class="chart" :option="option1" autoresize />
+						<span class="sky-1"></span>
+					</div>
+					<div class="li-man">总人数：123456</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>客源分析TOP5</span>
+					</div>
+					<div class="press-box" v-for="item in 5" :key="i">
+						<div class="press-title">
+							<span>河北</span>
+							<span>55%</span>
+						</div>
+						
+						<div class="bg-box">
+							<div class="bg-width"></div>
+						</div>
+					</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>购票来源</span>
+					</div>
+					<div class="round-press">
+						<div class="round-1">
+							<div class="round-width"></div>
+						</div>
+					</div>
+					<v-chart class="chart" :option="option2" autoresize />
+				</li>
+			</ul>
+		</div>
+		<div class="content-2 content">
+			<!-- 1 -->
+			<div class="title">
+				停车信息
+			</div>
+			
+			<ul class="ul-1">
+				<li class="li">
+					<div class="li-title">
+						<span>年龄性别占比</span>
+					</div>
+					<v-chart class="chart" :option="option1" autoresize />
+					<div class="li-man">总人数：123456</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>客源分析TOP5</span>
+					</div>
+					<div class="press-box" v-for="item in 5" :key="i">
+						<div class="press-title">
+							<span>河北</span>
+							<span>55%</span>
+						</div>
+						
+						<div class="bg-box">
+							<div class="bg-width"></div>
+						</div>
+					</div>
+				</li>
+				<li class="li">
+					<div class="li-title">
+						<span>购票来源</span>
+					</div>
+					<div class="round-press">
+						<div class="round-1">
+							<div class="round-width"></div>
+						</div>
+					</div>
+					<v-chart class="chart" :option="option2" autoresize />
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { GaugeChart } from 'echarts/charts';
+import { PieChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref, provide } from 'vue';
+
+use([
+  GaugeChart,
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+
+provide(THEME_KEY, 'dark');
+
+const option1 = ref({
+	backgroundColor:'transparent',
+	  series: [
+	    {
+	      name: 'Access From',
+		  width:300,
+		  height:100,
+		  type: 'pie',
+		  left:-50,
+		  top:10,
+		  radius: ['40%', '50%'],
+		  avoidLabelOverlap: true,
+		  padAngle: 5,
+		  itemStyle: {
+			borderRadius: 2
+		  },
+	      data: [
+	        { value: 200, name: '30-40%' },
+	        { value: 500, name: '19岁以下' },
+	        { value: 234, name: '18-30岁' },
+	        { value: 135, name: '60岁以上' },
+	        { value: 100, name: '30-40岁' },
+	      ],
+		  labelLine: {
+			show: true
+		  },
+	      emphasis: {
+	        itemStyle: {
+	          shadowBlur: 10,
+	          shadowOffsetX: 0,
+	          shadowColor: 'rgba(0, 0, 0, 0.5)',
+	        },
+	      },
+	    },
+	  ],
+});
+const option2 = ref({
+	backgroundColor:'transparent',
+	
+});
+
+</script>
+
+<style lang="scss" scoped>
+	.box-4-content{
+		width:vw(792);
+		height:vh(976);
+		background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
+		// background: green;
+		border-radius: 0px 0px 0px 0px;
+		.content-2{
+			.all-2-infor{
+			
+				.box-1{
+					display: flex;
+					width:vw(384);
+					height: vh(70);
+					background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
+					border-radius: 0px 0px 0px 0px;
+					border: 1px solid;
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					.info1{
+						text-align: center;
+						
+					}
+					.t-ico-1{
+						justify-content: center;
+						align-items: center;
+						.t-ico-1{
+							width:vw(45);
+							height:vh(47);
+							
+						}
+					}
+				}
+			}
+		}
+		.content{
+			.title{
+				width: vw(220);
+				height: vh(32);
+				line-height: vh(32);
+				background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
+				font-size:vw(16);
+				text-align: center;
+				margin: vh(20) auto;
+			}
+			.ul-1{
+				display:flex;
+				.chart-1{
+					width:vw(253);
+					height:vh(150);
+					position: relative;
+					.sky-1{
+						position: absolute;
+						top:vw(60);
+						left:50%;
+						width:vw(30);
+						height:vw(30);
+						transform: translate(-50%);
+						background-color: #00B1FF;
+						border-radius: 50%;
+					}
+				}
+				
+				.li{
+					width:vw(253);
+					height:vh(225);
+					margin-right:vw(10);
+					background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
+					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+					.li-man{
+						font-size:vw(14);
+						color:#fff;
+						margin:0 auto;
+						text-align: center;
+					}
+					.round-press{
+						
+					}
+					.press-box{
+						padding:vw(5) vw(10);
+						// margin-bottom:vh(10);
+						.press-title{
+							display: flex;
+							justify-content: space-between;
+							color:rgba(255,255,255,0.9);
+							font-size:vw(12);
+							margin-bottom:vh(10)
+						}
+						.bg-box{
+							width: 100%;
+							height: vw(10);
+							background: rgba(0,150,255,0.15);
+							border-radius: vw(5);
+						}
+						.bg-width{
+							background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
+							border-radius: vw(5);
+							border-top-right-radius: 0;
+							border-bottom-right-radius: 0;
+							width:50%;
+							height:100%;
+							position: relative;
+						}
+						.bg-width::before{
+							display: block;
+							content: '';
+							width:vw(10);
+							height:vw(10);
+							// border-radius: 50%;
+							position: absolute;
+							right:0;
+							top:0;
+							width: 0;
+							height: 0;
+							border-left: vw(10) solid red;
+							// border-right-width: vw(10);
+							// border-bottom-width: vw(10);
+							// border-left-width: vw(10);
+							
+							
+						}
+					}
+					.li-title{
+						background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
+						span{
+							background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
+							font-family: Microsoft YaHei, Microsoft YaHei;
+							font-weight: bold;
+							font-size: vw(15);
+							line-height: vh(18);
+							text-align: left;
+							font-style: normal;
+							text-transform: none;
+							display: inline-block;
+							margin-left:vw(20);
+							margin-bottom:vh(10);
+							
+						}
+						
+						.li-1-echat{
+							position: relative;
+							.sty-1{
+								position: absolute;
+								top:50%;
+								left:50%;
+								transform: translate(-50%,-50%);
+								width:50rpx;
+								height:50rpx;
+								
+								
+							}
+							// width: 100%;
+							// height: 300px;
+							.chart {
+							
+							}
+						}
+					}
+				}
+			}
+		}
+		.chart {
+			width: vw(253);
+			height: vh(120);
+		}
+	}
+
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8ba72eb..49d9f6c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -8,13 +8,14 @@
         <li></li>
         <li></li>
       </ul>
+	  <box4 />
     </div>
   </main>
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
-
+  import box4 from './components/box-4.vue'
   onMounted(() => {})
 </script>