完成统计页面柱状图

components/BarEcharts.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="barEcharts" style="width:370px;height:300px"></div>
+<div id="barEcharts" style="width:380px;height:350px"></div>
 </template>
 <script setup>
 import{onMounted} from 'vue';
@@ -10,27 +10,28 @@ onMounted(()=>{
   tooltip: {
     trigger: 'axis',
     axisPointer: {
-      // Use axis to trigger tooltip
-      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+      type: 'shadow',
     },
   },
   legend: {
+    top:10,
+    right:0,
     icon: 'circle',
     orient: 'horizontal',
-    itemGap: 40,
-    itemWidth: 14,
+    itemGap: 10,
+    itemWidth: 10,
     itemHeight: 14,
     textStyle: {
       fontSize: 14,
       color: '#858585',
       fontWeight: 400,
-      padding: [4, 0, 0, 0],
     },
-    data: ['A', 'B', 'P', 'E'],
+
   },
+  data: ['任务一', '任务二', '任务三', '任务四'],
   color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
   grid: {
-    left: '3%',
+    left: '10%',
     right: '0',
     bottom: '5%',
     containLabel: false,
@@ -58,67 +59,49 @@ onMounted(()=>{
   },
   series: [
     {
-      name: 'E',
+      name: '任务四',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: function (e) {
-          return e.value ? e.seriesName : '';
-        }
       },
       itemStyle: {
-        borderRadius: [0, 0, 4, 4],
-      },
-      barWidth: 20,
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
+      barWidth: 12,
       data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
     },
     {
-      name: 'P',
+      name: '任务三',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
     },
     {
-      name: 'B',
+      name: '任务二',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
     },
     {
-      name: 'A',
+      name: '任务一',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
       },
       itemStyle: {
-        borderRadius: [4, 4, 0, 0],
-      },
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
       data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
     },

components/BonusCollection.vue

@@ -17,7 +17,7 @@
             {{ (+item.money / 100).toFixed(2) }}
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             {{ item.remark }}

components/HistoricalApplication.vue

@@ -26,7 +26,7 @@
             /> -->
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->

components/RingEcharts.vue

@@ -18,27 +18,22 @@ onMounted(()=>{
         {
             name: '办公费',
             value: 36,
-            rate: 12
         },
         {
             name: '车辆费用',
             value: 20,
-            rate: 20
         },
         {
             name: '差旅费',
             value: 15,
-            rate: -40
         },
         {
             name: '租赁费',
             value: 10,
-            rate: -15
         },
         {
             name: '其他',
             value: 9,
-            rate: 12
         },
     ];
   const option = {

pages/Initiate-application.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <!-- 导航返回上一页 -->
-    <van-nav-bar title="发起申请" left-arrow @click-left="onClickLeft" />
     <!-- 申请发票需要输入的数据 -->
     <div class="bg-white pb-3">
       <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>

pages/index.vue

@@ -85,12 +85,15 @@
             <RingEcharts class="w-full h-full" id="memberEcharts"/>
           </div>
           <!-- 时间财务图 -->
-          <div class="h-72 overflow-hidden">
+          <div class="overflow-hidden">
               <div>
                 <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
                 <span>时间财务图</span>
               </div>
-              <BarEcharts class="w-full h-full"  />
+              <BarEcharts class="w-full h-full mt-5"  />
+
+              <!-- 没有数据展示空组件 -->
+              <!-- <van-empty description="暂无图表数据信息" /> -->
           </div>
         </div>
       </van-tab>