报告维护加的几个echarts

src/views/report/Overvoewnew.vue

@@ -1,6 +1,134 @@
 <template>
   <!-- 概览! -->
   <div class="overvoew">
+    <!-- 顶部统计卡片 -->
+    <div class="stat-cards">
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>项目总数</span>
+          <a-icon type="file-text"/>
+        </template>
+        <a-statistic
+            :value="82"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>任务总数</span>
+          <a-icon type="folder"/>
+        </template>
+        <a-statistic
+            :value="1091"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>参加人数</span>
+          <a-icon type="user"/>
+        </template>
+        <a-statistic
+            :value="100"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>学习人数</span>
+          <a-icon type="graduation-cap"/>
+        </template>
+        <a-statistic
+            :value="68"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+
+      <a-card
+          class="stat-card"
+          :bordered="false"
+      >
+        <template #title>
+          <span>完成人数</span>
+          <a-icon type="check-circle"/>
+        </template>
+        <a-statistic
+            :value="34"
+            :precision="0"
+            value-style="font-size: 24px; font-weight: bold; color: #000"
+        />
+      </a-card>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-row">
+      <!-- 参与漏斗图 -->
+      <a-card
+          class="chart-card"
+          title="学员完成项目漏斗"
+          :bordered="false"
+      >
+        <div ref="funnelChart" style="width: 100%; height: 300px;"></div>
+      </a-card>
+
+      <!-- 完成比例柱状图 -->
+      <a-card
+          class="chart-card"
+          title="完成比例"
+          :bordered="false"
+      >
+        <div ref="chart" style="width: 100%; height: 400px;"></div>
+      </a-card>
+
+      <!-- 项目概览饼状图 -->
+      <a-card
+          class="chart-card"
+          title="项目概览"
+          :bordered="false"
+      >
+        <div ref="pieChart" style="width: 100%; height: 400px;"></div>
+      </a-card>
+
+      <!-- 创建人归属 -->
+      <a-card
+          class="chart-card"
+          title="创建人归属"
+          :bordered="false"
+      >
+        <div class="tags-cloud">
+          <div class="tag">李子轩</div>
+          <div class="tag">刘俊琪</div>
+          <div class="tag">林雨桐</div>
+          <div class="tag">陆羽泽</div>
+          <div class="tag">张一诺</div>
+          <div class="tag">赵昊然</div>
+          <div class="tag">林子涵</div>
+          <div class="tag">徐祥瑞</div>
+          <div class="tag">吴梓涵</div>
+          <div class="tag">杨浩宇</div>
+        </div>
+      </a-card>
+    </div>
+    <!-- todo 上边是新加的数据 -->
     <!-- 以下为顶部搜索框 -->
     <div class="filterShow">
       <div class="select" v-if="currentTab !== 6">
@@ -216,7 +344,8 @@
   </div>
 </template>
 <script>
-import {ref, toRefs, reactive, onMounted, computed} from "vue";
+import * as echarts from 'echarts';
+import {ref, toRefs, reactive, onMounted, computed, onUnmounted} from "vue";
 import * as api from "../../api/indexOvervoew";
 import downLoad from "../../utils/downLoad";
 import axios from "axios";
@@ -1886,6 +2015,7 @@ export default {
       return dayjs(time).format(format);
     };
 
+
     //后续抽到 工具类中
     function formatTextRate(value) {
       if (!value && value != 0) {
@@ -1924,6 +2054,248 @@ export default {
       return recursiveSearch(data, value, '');
     }
 
+
+    // 组织树数据
+    const orgId = ref(null);
+
+    // 漏斗图数据
+    const funnelChart = ref(null);
+    let myFunnelChart = null;
+
+    // 柱状图数据
+    const chart = ref(null);
+    let myChart = null;
+
+    // 饼状图数据
+    const pieChart = ref(null);
+    let myPieChart = null;
+
+    onMounted(() => {
+      // 初始化漏斗图
+      myFunnelChart = echarts.init(funnelChart.value);
+      const funnelOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} 人 ({d}%)'
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          data: ['参加人数', '学习人数', '完成人数']
+        },
+        series: [
+          {
+            name: '学员完成项目漏斗',
+            type: 'funnel',
+            left: '10%',
+            top: '50%',
+            bottom: '5%',
+            width: '80%',
+            min: 0,
+            max: 100,
+            minSize: '0%',
+            maxSize: '100%',
+            sort: 'descending',
+            gap: 2,
+            label: {
+              show: true,
+              position: 'inside',
+              formatter: '{b}: {c} 人'
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: 'solid'
+              }
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1
+            },
+            emphasis: {
+              label: {
+                fontSize: 14
+              }
+            },
+            data: [
+              {value: 100, name: '参加人数', itemStyle: {color: '#5470c6'}},
+              {value: 50, name: '学习人数', itemStyle: {color: '#91cc75'}},
+              {value: 20, name: '完成人数', itemStyle: {color: '#fac858'}}
+            ]
+          }
+        ]
+      };
+      myFunnelChart.setOption(funnelOption);
+
+      // 初始化柱状图
+      myChart = echarts.init(chart.value);
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['学习率', '平均学习率', '整体完成率'],
+          bottom: 0
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['0.8']
+        },
+        yAxis: {
+          type: 'value',
+          min: 0.4,
+          max: 0.9,
+          interval: 0.025,
+          axisLabel: {
+            formatter: '{value}'
+          }
+        },
+        series: [
+          {
+            name: '学习率',
+            type: 'bar',
+            data: [0.775],
+            itemStyle: {
+              color: '#5470c6'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          },
+          {
+            name: '平均学习率',
+            type: 'bar',
+            data: [0.65],
+            itemStyle: {
+              color: '#91cc75'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          },
+          {
+            name: '整体完成率',
+            type: 'bar',
+            data: [0.5],
+            itemStyle: {
+              color: '#fac858'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: '{c}'
+            }
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+
+      // 初始化环形图
+      myPieChart = echarts.init(pieChart.value);
+      const pieOption = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          data: ['面授课程数', '在线课程数']
+        },
+        series: [
+          {
+            name: '项目概览',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['50%', '50%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 707.1, name: '面授课程数', itemStyle: {color: '#5470c6'}},
+              {value: 292.9, name: '在线课程数', itemStyle: {color: '#91cc75'}}
+            ]
+          }
+        ]
+      };
+
+      // 添加环形图中心文本
+      const centerText = {
+        name: '概览总数',
+        value: 1028,
+        itemStyle: {
+          normal: {
+            color: 'transparent',
+            label: {
+              show: true,
+              position: 'center',
+              formatter: function () {
+                return '{a|概览总数}\n{b|1,028}';
+              },
+              rich: {
+                a: {
+                  color: '#333',
+                  fontSize: 14,
+                  lineHeight: 20
+                },
+                b: {
+                  color: '#333',
+                  fontSize: 16,
+                  fontWeight: 'bold',
+                  lineHeight: 20
+                }
+              }
+            }
+          }
+        }
+      };
+      pieOption.series[0].data.push(centerText);
+
+      myPieChart.setOption(pieOption);
+
+      // 窗口大小变化时重新调整图表大小
+      window.addEventListener('resize', () => {
+        myChart?.resize();
+        myPieChart?.resize();
+        myFunnelChart?.resize();
+      });
+    });
+
+    onUnmounted(() => {
+      // 组件销毁前移除事件监听器
+      window.removeEventListener('resize', () => {
+      });
+    });
+
     return {
       exportClickAll,
       getTabData,