feat；整体趋势

src/views/count/main/trend/index.vue

@@ -26,6 +26,34 @@
                      </template>
                   </el-popover>
                </Title>
+               <div style="position: relative; top: -37px">
+                  <div class="link" style="float: right;">
+                     <svg style="margin-left: 20px;transform: translateY(3px);" width="16" height="16" viewBox="0 0 16 16"
+                        fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                           d="M2.66663 14.6668V2.00016C2.66663 1.63197 2.9651 1.3335 3.33329 1.3335H12.6666C13.0348 1.3335 13.3333 1.63197 13.3333 2.00016V14.6668L7.99996 11.9093L2.66663 14.6668Z"
+                           stroke="#167AF0" stroke-linejoin="round" />
+                        <path d="M7.98328 4.6499V8.6499" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M5.98328 6.6499H9.98328" stroke="#167AF0" stroke-linecap="round"
+                           stroke-linejoin="round" />
+                     </svg>
+                     <span style="margin-left: 8px;">订阅</span>
+                  </div>
+                  <div class="link" style="float: right;">
+                     <svg style="transform: translateY(3px);" width="16" height="16" viewBox="0 0 16 16" fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                           d="M13.3333 5.3335V2.00016C13.3333 1.63197 13.0348 1.3335 12.6666 1.3335H3.33329C2.9651 1.3335 2.66663 1.63197 2.66663 2.00016V14.0002C2.66663 14.3684 2.9651 14.6668 3.33329 14.6668H5.33329"
+                           stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M5.33337 5.3335H10" stroke="#167AF0" stroke-linecap="round" />
+                        <path d="M9 11H15" stroke="#167AF0" stroke-linecap="round" />
+                        <path d="M12 14V8" stroke="#167AF0" stroke-linecap="round" />
+                        <path d="M5.33337 8H8.00004" stroke="#167AF0" stroke-linecap="round" />
+                     </svg>
+                     <span style="margin-left: 8px;">编辑指标</span>
+                  </div>
+                  <!-- <div class="link" style="float: right;">生成AI简报</div> -->
+               </div>
                <div class="msg">
                   <el-icon class="ml-1" style="color: #a4b8cf; vertical-align: middle;">
                      <InfoFilled />
@@ -93,11 +121,8 @@
             </template>
          </Lcard>
          <Lcard>
-            <el-date-picker style="float: left;" v-model="timeRange" type="datetimerange" range-separator="To"
-               start-placeholder="Start date" end-placeholder="End date" />
-            <div class="link" style="float: right;">订阅</div>
-            <div class="link" style="float: right;">编辑指标</div>
-            <div class="link" style="float: right;">生成AI简报</div>
+            <el-date-picker style="float: left;width: 240px;height: 30px;" v-model="timeRange" type="daterange"
+               value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" />
             <div class="line"></div>
             <div class="flex items-center justify-between mb-2 mt-3">
                <el-form>
@@ -110,10 +135,10 @@
                </el-form>
                <div class="flex items-center">
                   <el-radio-group v-model="lineChartUser">
-                     <el-radio-button label="hour">新增用户</el-radio-button>
-                     <el-radio-button label="day">活跃用户</el-radio-button>
-                     <el-radio-button label="week">启动次数</el-radio-button>
-                     <el-radio-button label="month">累计用户</el-radio-button>
+                     <el-radio-button label="new">新增用户</el-radio-button>
+                     <el-radio-button label="active">活跃用户</el-radio-button>
+                     <el-radio-button label="doing">启动次数</el-radio-button>
+                     <el-radio-button label="total">累计用户</el-radio-button>
                   </el-radio-group>
                </div>
             </div>
@@ -195,6 +220,8 @@ const timeRange = ref(null);
 const qChartRef = ref<HTMLDivElement | null>(null);
 let qualityChart: echarts.ECharts | null = null;
 
+const lineChartUser = ref('new')
+
 onMounted(() => {
    setTimeout(() => {
       initQualityChart();
@@ -247,25 +274,25 @@ function initQualityChart(): void {
 
 
 interface TableRow {
-	date: string;
-	newUsers: number;
-	ratio: string;
+   date: string;
+   newUsers: number;
+   ratio: string;
 }
 // 展开/收起明细
 const showDetail1 = ref(true);
 const pagedTableRows = computed(() => {
-	const startIndex = (currentPage.value - 1) * pageSize.value;
-	return tableRows.value.slice(startIndex, startIndex + pageSize.value);
+   const startIndex = (currentPage.value - 1) * pageSize.value;
+   return tableRows.value.slice(startIndex, startIndex + pageSize.value);
 });
 // 表格相关（静态数据）
 const currentPage = ref(1);
 const pageSize = ref(5);
 const tableRows = ref<TableRow[]>(
-	Array.from({ length: 42 }).map((_, idx) => ({
-		date: `2025-08-${String(11).padStart(2, '0')}`,
-		newUsers: 727,
-		ratio: '97.45%',
-	}))
+   Array.from({ length: 42 }).map((_, idx) => ({
+      date: `2025-08-${String(11).padStart(2, '0')}`,
+      newUsers: 727,
+      ratio: '97.45%',
+   }))
 );
 
 
@@ -281,107 +308,107 @@ const circleEchartUser2 = ref('hour');
 
 // 初始化圆环图
 function initCircleChart1(): void {
-  if (!circleEchartRef1.value) return;
-  if (circleChart1) circleChart1.dispose();
-  
-  circleChart1 = echarts.init(circleEchartRef1.value);
-  
-  const option: echarts.EChartsOption = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      bottom: '0',
-      left: 'center'
-    },
-    series: [
-      {
-        name: '版本分布',
-        type: 'pie',
-        radius: ['50%', '70%'], // 设置内半径和外半径，形成圆环效果
-        avoidLabelOverlap: false,
-        padAngle: 2, // 扇区间隙
-        itemStyle: {
-          borderRadius: 5 // 扇区圆角
-        },
-        label: {
-          show: true,
-          formatter: '{b}: {d}%' // 显示标签和百分比
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 14,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: true
-        },
-        data: [
-          { value: 35, name: 'v3.2.1' },
-          { value: 25, name: 'v3.1.5' },
-          { value: 20, name: 'v3.0.8' },
-          { value: 10, name: 'v2.9.3' },
-          { value: 10, name: '其他' }
-        ]
-      }
-    ]
-  };
-  
-  circleChart1.setOption(option);
+   if (!circleEchartRef1.value) return;
+   if (circleChart1) circleChart1.dispose();
+
+   circleChart1 = echarts.init(circleEchartRef1.value);
+
+   const option: echarts.EChartsOption = {
+      tooltip: {
+         trigger: 'item'
+      },
+      legend: {
+         bottom: '0',
+         left: 'center'
+      },
+      series: [
+         {
+            name: '版本分布',
+            type: 'pie',
+            radius: ['50%', '70%'], // 设置内半径和外半径，形成圆环效果
+            avoidLabelOverlap: false,
+            padAngle: 2, // 扇区间隙
+            itemStyle: {
+               borderRadius: 5 // 扇区圆角
+            },
+            label: {
+               show: true,
+               formatter: '{b}: {d}%' // 显示标签和百分比
+            },
+            emphasis: {
+               label: {
+                  show: true,
+                  fontSize: 14,
+                  fontWeight: 'bold'
+               }
+            },
+            labelLine: {
+               show: true
+            },
+            data: [
+               { value: 35, name: 'v3.2.1' },
+               { value: 25, name: 'v3.1.5' },
+               { value: 20, name: 'v3.0.8' },
+               { value: 10, name: 'v2.9.3' },
+               { value: 10, name: '其他' }
+            ]
+         }
+      ]
+   };
+
+   circleChart1.setOption(option);
 }
 // 初始化圆环图
 function initCircleChart2(): void {
-  if (!circleEchartRef2.value) return;
-  if (circleChart2) circleChart2.dispose();
-  
-  circleChart2 = echarts.init(circleEchartRef2.value);
-  
-  const option: echarts.EChartsOption = {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      bottom: '0',
-      left: 'center'
-    },
-    series: [
-      {
-        name: '版本分布',
-        type: 'pie',
-        radius: ['50%', '70%'], // 设置内半径和外半径，形成圆环效果
-        avoidLabelOverlap: false,
-        padAngle: 2, // 扇区间隙
-        itemStyle: {
-          borderRadius: 5 // 扇区圆角
-        },
-        label: {
-          show: true,
-          formatter: '{b}: {d}%' // 显示标签和百分比
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 14,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: true
-        },
-        data: [
-          { value: 35, name: 'v3.2.1' },
-          { value: 25, name: 'v3.1.5' },
-          { value: 20, name: 'v3.0.8' },
-          { value: 10, name: 'v2.9.3' },
-          { value: 10, name: '其他' }
-        ]
-      }
-    ]
-  };
-  
-  circleChart2.setOption(option);
+   if (!circleEchartRef2.value) return;
+   if (circleChart2) circleChart2.dispose();
+
+   circleChart2 = echarts.init(circleEchartRef2.value);
+
+   const option: echarts.EChartsOption = {
+      tooltip: {
+         trigger: 'item'
+      },
+      legend: {
+         bottom: '0',
+         left: 'center'
+      },
+      series: [
+         {
+            name: '版本分布',
+            type: 'pie',
+            radius: ['50%', '70%'], // 设置内半径和外半径，形成圆环效果
+            avoidLabelOverlap: false,
+            padAngle: 2, // 扇区间隙
+            itemStyle: {
+               borderRadius: 5 // 扇区圆角
+            },
+            label: {
+               show: true,
+               formatter: '{b}: {d}%' // 显示标签和百分比
+            },
+            emphasis: {
+               label: {
+                  show: true,
+                  fontSize: 14,
+                  fontWeight: 'bold'
+               }
+            },
+            labelLine: {
+               show: true
+            },
+            data: [
+               { value: 35, name: 'v3.2.1' },
+               { value: 25, name: 'v3.1.5' },
+               { value: 20, name: 'v3.0.8' },
+               { value: 10, name: 'v2.9.3' },
+               { value: 10, name: '其他' }
+            ]
+         }
+      ]
+   };
+
+   circleChart2.setOption(option);
 }