工作区详情echarts

src/views/system/workspace/detail.vue

@@ -106,6 +106,13 @@
                   </Col>
                 </div>
               </Card>
+
+              <Card>
+                <div class="process_title">
+                  <div class="title_info">执行统计</div>
+                </div>
+                <div ref="chartRef" style="width: 100%;height: 100%"></div>
+              </Card>
             </Col>
             <Col :span="6" class="homePage_right">
               <Card class="notice_card">
@@ -130,17 +137,6 @@
                 </div>
               </Card>
             </Col>
-            <a-col :span="12" class="chart_col">
-              <a-card title="任务状态">
-                <echarts-vue3 :option="pieOptions" autoresize />
-                <div class="status_counts">
-                  <div>1240/10% 进行中</div>
-                  <div>1845/33% 等待</div>
-                  <div>1666/33% 成功</div>
-                  <div>555/8% 失败</div>
-                </div>
-              </a-card>
-            </a-col>
           </Row>
         </div>
       </template>
@@ -212,7 +208,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, reactive, ref } from 'vue';
+import {onMounted, reactive, Ref, ref} from 'vue';
   import { useRoute } from 'vue-router';
   import { PageWrapper } from '@/components/Page';
   import { useGo } from '@/hooks/web/usePage';
@@ -222,6 +218,7 @@
   import { deleteUser, getAccountList } from '@/api/system/user/user';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
+  import { useECharts } from '@/hooks/web/useECharts';
   import AccountModal from '@/views/system/user/AccountModal.vue';
   import {
     columns,
@@ -235,6 +232,9 @@
 
   defineOptions({ name: 'AccountDetail' });
 
+
+const chartRef = ref<HTMLDivElement | null>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   const tableData = ref([]);
   const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
     title: '工作组列表',
@@ -397,8 +397,60 @@
     // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
     go('/system/system/workspace');
   }
+/** 执行统计echarts渲染*/
+function getEchartsData() {
+  setOptions({
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      bottom: '1%',
+      left: 'center',
+    },
+    series: [
+      {
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        name: '访问来源',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+          position: 'center',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '12',
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 1048, name: '搜索引擎' },
+          { value: 735, name: '直接访问' },
+          { value: 580, name: '邮件营销' },
+          { value: 484, name: '联盟广告' },
+        ],
+        animationType: 'scale',
+        animationEasing: 'exponentialInOut',
+        animationDelay: function () {
+          return Math.random() * 100;
+        },
+      },
+    ],
+  });
+}
   onMounted(() => {
     tableData.value = TreeData;
+    getEchartsData()
   });
 </script>
 
@@ -406,7 +458,27 @@
   .homePage_module {
     background-color: #fafbfc;
     padding: 20px;
+    .process_title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .title_info {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      .process_more {
+        font-size: 16px;
+        cursor: pointer;
+        color: #4aabfe;
+        font-weight: 600;
+      }
+    }
     .homePage_left {
+      .executeStatistics_card{
+        margin-top: 20px;
+      }
       .homePage_img {
         width: 93%;
       }
@@ -501,23 +573,6 @@
       .process_content {
         padding-top: 20px;
       }
-      .process_title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .title_info {
-          display: flex;
-          align-items: center;
-          font-size: 16px;
-          font-weight: 600;
-        }
-        .process_more {
-          font-size: 16px;
-          cursor: pointer;
-          color: #4aabfe;
-          font-weight: 600;
-        }
-      }
     }
   }