From 21cafdf0d0a032a991fdd1a1449d19405747e330 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 28 Mar 2025 11:25:51 +0800
Subject: [PATCH] feat: 日期调整

---
 src/views/Home/components/HomeRight/EventOverview.vue |   85 +++++++++++++++++++++++++++++++++---------
 1 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
index 20d1dfc..22e5042 100644
--- a/src/views/Home/components/HomeRight/EventOverview.vue
+++ b/src/views/Home/components/HomeRight/EventOverview.vue
@@ -8,6 +8,8 @@
 import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
 import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
 import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
+import * as echarts from 'echarts';
+import CommonDateTime from '@/components/CommonDateTime.vue';
 
 const list = ref([
   { name: '待审核', value: 265, img: overviewImg1, color: '#FF8E8E' },
@@ -18,29 +20,66 @@
   { name: '已完结', value: 262, img: overviewImg6, color: '#8EFFAC' },
 ]);
 const value = ref('');
+const echartsRef = ref('');
 
 const options = [
   {
     value: 'Option1',
     label: 'Option1',
   },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
 ];
+const option = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  legend: {},
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['暴露垃圾', '占道'],
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+    },
+  ],
+  series: [
+    {
+      name: '待完成',
+      type: 'bar',
+      stack: 'Ad',
+      emphasis: {
+        focus: 'series',
+      },
+      data: [120, 132],
+    },
+    {
+      name: '已完成',
+      type: 'bar',
+      stack: 'Ad',
+      emphasis: {
+        focus: 'series',
+      },
+      data: [220, 182],
+    },
+  ],
+};
+
+onMounted(() => {
+  const chart = echarts.init(echartsRef.value);
+
+  chart.setOption(option);
+});
 </script>
 
 <template>
@@ -59,6 +98,7 @@
           </div>
         </div>
       </div>
+      <CommonDateTime class="dateTime" />
 
       <el-select class="homeRightSelect" v-model="value" placeholder="请选择" size="large">
         <el-option
@@ -76,9 +116,7 @@
         <img class="completion-left-img" :src="completionLeft" />
       </div>
 
-      <div class="chart">
-        <div class="chart-text">echarts柱状图</div>
-      </div>
+      <div class="chart" ref="echartsRef"></div>
     </div>
   </div>
 </template>
@@ -118,6 +156,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  .dateTime{
+    width: 356px;
+  }
 
   .overviewData {
     width: 360px;
@@ -210,5 +252,10 @@
       opacity: 0.2;
     }
   }
+
+  .chart {
+    width: 356px;
+    height: 182px;
+  }
 }
 </style>

--
Gitblit v1.9.3