blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化日活用户趋势图 - 确保12个月都有数据点，使用平滑曲线连接所有点

Browse Source
This commit is contained in:
AIGC Developer
2025-10-22 09:27:34 +08:00
parent 7b7975e438
commit 0d3edd1736
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
demo/frontend/src/views/Home.vue
View File

@@ -110,35 +110,42 @@
<div class="chart-container">
<div class="line-chart">
<!-- SVG 曲线图 -->
<svg width="100%" height="200" viewBox="0 0 800 200" class="chart-svg">
<svg width="100%" height="200" viewBox="0 0 840 200" class="chart-svg">
<!-- 网格线 -->
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" stroke-width="0.5"/>
<pattern id="grid" width="60" height="40" patternUnits="userSpaceOnUse">
<path d="M 60 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" stroke-width="0.5"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
<!-- 数据曲线 -->
<path d="M 60,160 Q 120,140 180,120 T 300,80 T 420,100 T 540,60 T 660,80 T 740,70"
<!-- 数据曲线 - 平滑连接12个月的数据点 -->
<path d="M 60,160 C 100,150 140,140 180,120 C 220,100 260,90 300,80 C 340,85 380,95 420,100 C 460,90 500,70 540,60 C 580,65 620,75 660,80 C 700,75 740,70 780,70"
fill="none"
stroke="#3b82f6"
stroke-width="3"
class="chart-line-path"/>
<!-- 数据点 -->
<!-- 12个月的数据点 -->
<circle cx="60" cy="160" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="120" cy="140" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="100" cy="150" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="140" cy="140" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="180" cy="120" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="240" cy="100" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="220" cy="100" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="260" cy="90" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="300" cy="80" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="360" cy="90" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="340" cy="85" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="380" cy="95" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="420" cy="100" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="480" cy="80" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="460" cy="90" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="500" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="540" cy="60" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="600" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="580" cy="65" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="620" cy="75" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="660" cy="80" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="720" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="700" cy="75" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="740" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="780" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<!-- 高亮数据点 -->
<circle cx="300" cy="80" r="6" fill="#3b82f6" class="highlight-dot"/>