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:33:27 +08:00
parent 88c52d41d8
commit 97997b0833
1 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -120,42 +120,35 @@
<rect width="100%" height="100%" fill="url(#grid)" /> <rect width="100%" height="100%" fill="url(#grid)" />
<!-- 数据曲线 - 平滑连接12个月的数据点 --> <!-- 数据曲线 - 平滑连接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" <path d="M 60,160 C 90,155 120,150 150,140 C 180,130 210,115 240,120 C 270,105 300,100 330,90 C 360,80 390,85 420,80 C 450,85 480,85 510,95 C 540,95 570,100 600,100 C 630,95 660,90 690,80 C 720,70 750,70 780,70"
fill="none" fill="none"
stroke="#3b82f6" stroke="#3b82f6"
stroke-width="3" stroke-width="3"
class="chart-line-path"/> class="chart-line-path"/>
<!-- 12个月的数据点 --> <!-- 12个月的数据点 - 每个月一个点 -->
<circle cx="60" cy="160" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="60" cy="160" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="100" cy="150" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="120" 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="140" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="180" cy="120" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="240" cy="120" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="220" cy="100" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="300" cy="100" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="260" cy="90" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="360" cy="90" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="300" cy="80" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="420" cy="80" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="340" cy="85" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="480" cy="85" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="380" cy="95" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="540" cy="95" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="420" cy="100" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="600" cy="100" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="460" cy="90" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="660" cy="90" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="500" cy="70" r="4" fill="#3b82f6" class="chart-dot"/> <circle cx="720" cy="70" r="4" fill="#3b82f6" class="chart-dot"/>
<circle cx="540" cy="60" 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="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"/>
<!-- 高亮数据点 --> <!-- 高亮数据点 - 6月数据点 -->
<circle cx="300" cy="80" r="6" fill="#3b82f6" class="highlight-dot"/> <circle cx="360" cy="90" r="6" fill="#3b82f6" class="highlight-dot"/>
<circle cx="300" cy="80" r="12" fill="#3b82f6" opacity="0.2" class="highlight-ring"/> <circle cx="360" cy="90" r="12" fill="#3b82f6" opacity="0.2" class="highlight-ring"/>
<!-- 工具提示 --> <!-- 工具提示 - 6月数据 -->
<g class="tooltip-group" transform="translate(300, 60)"> <g class="tooltip-group" transform="translate(360, 70)">
<rect x="-30" y="-40" width="60" height="30" rx="6" fill="#1e293b" class="tooltip-bg"/> <rect x="-30" y="-40" width="60" height="30" rx="6" fill="#1e293b" class="tooltip-bg"/>
<text x="0" y="-25" text-anchor="middle" fill="white" font-size="12" font-weight="600" class="tooltip-value">1,000</text> <text x="0" y="-25" text-anchor="middle" fill="white" font-size="12" font-weight="600" class="tooltip-value">1,000</text>
<text x="0" y="-10" text-anchor="middle" fill="white" font-size="10" opacity="0.8" class="tooltip-date">2月12号</text> <text x="0" y="-10" text-anchor="middle" fill="white" font-size="10" opacity="0.8" class="tooltip-date">6月12号</text>
<!-- 工具提示箭头 --> <!-- 工具提示箭头 -->
<polygon points="0,0 -5,10 5,10" fill="#1e293b" class="tooltip-arrow"/> <polygon points="0,0 -5,10 5,10" fill="#1e293b" class="tooltip-arrow"/>
</g> </g>