增加了图表[0.2.7.2][ci]

main/templates/main/home.html

@@ -67,7 +67,10 @@
         <div id="chartTrend" style="width:100%;height:320px;"></div>
       </div>
       <div class="card">
-        <div class="header"><h3>类型占比（近30天）</h3></div>
+        <div class="header">
+            <h3>类型占比（近30天）</h3>
+            <button id="toggleTypesChartBtn" class="btn btn-primary" style="font-size: 12px; padding: 4px 8px;">切换图表</button>
+        </div>
         <div id="chartTypes" style="width:100%;height:320px;"></div>
       </div>
       <div class="card">
@@ -170,19 +173,74 @@
       });
     }
 
+    let typesChartData = [];
+    let currentChartType = 'pie';
+    let typesChartInterval = null;
+
     async function loadTypes(){
       const url = '/elastic/analytics/types/?' + qs({ from:'now-30d', to:'now', size:10 });
       const res = await fetchJSON(url);
       if(res.status!=='success') return;
       const buckets = res.data || [];
-      const data = buckets.map(b=>({ name: String(b.key||'未知'), value: b.doc_count||0 }));
-      typesChart.setOption({
-        tooltip:{trigger:'item'},
-        legend:{type:'scroll'},
-        series:[{ type:'pie', radius:['40%','70%'], data }]
-      });
+      typesChartData = buckets.map(b=>({ name: String(b.key||'未知'), value: b.doc_count||0 }));
+      renderTypesChart();
+      startTypesChartRotation();
     }
 
+    function renderTypesChart() {
+      if (currentChartType === 'pie') {
+        typesChart.setOption({
+          tooltip:{trigger:'item'},
+          legend:{type:'scroll', top:'bottom'},
+          grid: { top: 0, bottom: 0, left: 0, right: 0 },
+          xAxis: { show: false },
+          yAxis: { show: false },
+          series:[{ 
+            type:'pie', 
+            radius:['40%','70%'], 
+            center: ['50%', '50%'],
+            data: typesChartData,
+            label: { show: false },
+            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }
+          }]
+        }, true);
+      } else {
+        const names = typesChartData.map(d => d.name);
+        const values = typesChartData.map(d => d.value);
+        typesChart.setOption({
+          tooltip:{trigger:'axis', axisPointer:{type:'shadow'}},
+          legend:{show: false},
+          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+          xAxis: { type: 'category', data: names, show: true },
+          yAxis: { type: 'value', show: true },
+          series: [{
+            type: 'bar',
+            data: values,
+            itemStyle: { color: '#5470c6' },
+            barWidth: '60%'
+          }]
+        }, true);
+      }
+    }
+
+    function toggleChartType() {
+      currentChartType = currentChartType === 'pie' ? 'bar' : 'pie';
+      renderTypesChart();
+    }
+
+    function startTypesChartRotation() {
+      if (typesChartInterval) clearInterval(typesChartInterval);
+      typesChartInterval = setInterval(() => {
+        toggleChartType();
+      }, 5000);
+    }
+
+    document.getElementById('toggleTypesChartBtn').addEventListener('click', () => {
+      toggleChartType();
+      // Reset timer on manual interaction
+      startTypesChartRotation();
+    });
+
     async function loadTypesTrend(){
       const url = '/elastic/analytics/types_trend/?' + qs({ from:'now-180d', to:'now', interval:'week', size:6 });
       const res = await fetchJSON(url);
@@ -233,7 +291,8 @@
         const t = formatTime(it.time);
         const u = it.username || '';
         const ty = it.type || '未知';
-        li.textContent = `${t}，${u}，${ty}`;
+        const de = it.detail ? `，${it.detail}` : '';
+        li.textContent = `${t}，${u}，${ty}${de}`;
         listEl.appendChild(li);
       });
     }