| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Area Chart Template |
| 6 | Usage: Trend changes, cumulative data display |
| 7 | Scenarios: Traffic trends, cumulative sales, inventory changes, user growth |
| 8 | Supports: 12 time points × 2 series (adjustable) |
| 9 | Difference from Line Chart: Filled area emphasizes cumulative volume and changes |
| 10 | --> |
| 11 | <defs> |
| 12 | <!-- Area fill gradient (Blue series) --> |
| 13 | <linearGradient id="areaGrad1" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 14 | <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.6" /> |
| 15 | <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.1" /> |
| 16 | </linearGradient> |
| 17 | <!-- Area fill gradient (Green series) --> |
| 18 | <linearGradient id="areaGrad2" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 19 | <stop offset="0%" style="stop-color:#10B981;stop-opacity:0.5" /> |
| 20 | <stop offset="100%" style="stop-color:#10B981;stop-opacity:0.05" /> |
| 21 | </linearGradient> |
| 22 | </defs> |
| 23 | <!-- Background --> |
| 24 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 25 | <!-- Title --> |
| 26 | <g id="header" data-pptx-bounds="60 35 650 78" |
| 27 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif"> |
| 28 | <text x="60" y="70" font-size="34" font-weight="bold" fill="#0F172A">Website Traffic Trend Analysis</text> |
| 29 | <text x="60" y="105" font-size="18" fill="#64748B">2025 Monthly Data · Unit: 10K Visits</text> |
| 30 | </g> |
| 31 | <!-- Legend --> |
| 32 | <g id="legend" transform="translate(950, 70)" data-pptx-bounds="950 68 290 24" |
| 33 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif"> |
| 34 | <line x1="0" y1="10" x2="30" y2="10" stroke="#3B82F6" stroke-width="3"/> |
| 35 | <circle cx="15" cy="10" r="5" fill="#3B82F6"/> |
| 36 | <text x="40" y="15" font-size="15" fill="#475569">PC Visits</text> |
| 37 | <line x1="150" y1="10" x2="180" y2="10" stroke="#10B981" stroke-width="3"/> |
| 38 | <circle cx="165" cy="10" r="5" fill="#10B981"/> |
| 39 | <text x="190" y="15" font-size="15" fill="#475569">Mobile Visits</text> |
| 40 | </g> |
| 41 | <!-- Chart Area --> |
| 42 | <g id="area_chart" data-pptx-bounds="80 150 1140 445" data-pptx-replace-with="chart"> |
| 43 | <metadata type="application/json"> |
| 44 | { |
| 45 | "name": "area_chart", |
| 46 | "x": 105, |
| 47 | "y": 160, |
| 48 | "width": 1095, |
| 49 | "height": 433.5, |
| 50 | "type": "area", |
| 51 | "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], |
| 52 | "series": [ |
| 53 | {"name": "PC Visits", "values": [320, 280, 350, 420, 480, 520, 580, 620, 550, 490, 460, 520]}, |
| 54 | {"name": "Mobile Visits", "values": [180, 160, 210, 280, 350, 420, 480, 540, 500, 460, 430, 490]} |
| 55 | ], |
| 56 | "style": {"colors": ["#3B82F6", "#10B981"]} |
| 57 | } |
| 58 | </metadata> |
| 59 | <g id="chartArea"> |
| 60 | <!-- Y-axis Grid Lines --> |
| 61 | <line x1="120" y1="560" x2="1200" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 62 | <line x1="120" y1="470" x2="1200" y2="470" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 63 | <line x1="120" y1="380" x2="1200" y2="380" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 64 | <line x1="120" y1="290" x2="1200" y2="290" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 65 | <line x1="120" y1="200" x2="1200" y2="200" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 66 | <!-- Y-axis Labels --> |
| 67 | <text x="105" y="565" |
| 68 | font-size="14" fill="#64748B" text-anchor="end">0</text> |
| 69 | <text x="105" y="475" |
| 70 | font-size="14" fill="#64748B" text-anchor="end">200</text> |
| 71 | <text x="105" y="385" |
| 72 | font-size="14" fill="#64748B" text-anchor="end">400</text> |
| 73 | <text x="105" y="295" |
| 74 | font-size="14" fill="#64748B" text-anchor="end">600</text> |
| 75 | <text x="105" y="205" |
| 76 | font-size="14" fill="#64748B" text-anchor="end">800</text> |
| 77 | <!-- Axes --> |
| 78 | <line x1="120" y1="160" x2="120" y2="560" stroke="#94A3B8" stroke-width="2"/> |
| 79 | <line x1="120" y1="560" x2="1200" y2="560" stroke="#94A3B8" stroke-width="2"/> |
| 80 | <!-- X-axis Labels (12 months) --> |
| 81 | <!-- Distance between each month: (1200-120)/12 = 90px --> |
| 82 | <text x="165" y="590" |
| 83 | font-size="14" fill="#64748B" text-anchor="middle">Jan</text> |
| 84 | <text x="255" y="590" |
| 85 | font-size="14" fill="#64748B" text-anchor="middle">Feb</text> |
| 86 | <text x="345" y="590" |
| 87 | font-size="14" fill="#64748B" text-anchor="middle">Mar</text> |
| 88 | <text x="435" y="590" |
| 89 | font-size="14" fill="#64748B" text-anchor="middle">Apr</text> |
| 90 | <text x="525" y="590" |
| 91 | font-size="14" fill="#64748B" text-anchor="middle">May</text> |
| 92 | <text x="615" y="590" |
| 93 | font-size="14" fill="#64748B" text-anchor="middle">Jun</text> |
| 94 | <text x="705" y="590" |
| 95 | font-size="14" fill="#64748B" text-anchor="middle">Jul</text> |
| 96 | <text x="795" y="590" |
| 97 | font-size="14" fill="#64748B" text-anchor="middle">Aug</text> |
| 98 | <text x="885" y="590" |
| 99 | font-size="14" fill="#64748B" text-anchor="middle">Sep</text> |
| 100 | <text x="975" y="590" |
| 101 | font-size="14" fill="#64748B" text-anchor="middle">Oct</text> |
| 102 | <text x="1065" y="590" |
| 103 | font-size="14" fill="#64748B" text-anchor="middle">Nov</text> |
| 104 | <text x="1155" y="590" |
| 105 | font-size="14" fill="#64748B" text-anchor="middle">Dec</text> |
| 106 | <!-- chart-plot-area: 120,160,1200,560 --> |
| 107 | <!-- X increments 90 from 165; Y = 560 - (value / 200) × 90. --> |
| 108 | <!-- Area 1: PC (Blue) --> |
| 109 | <path d="M 165,560 |
| 110 | L 165,416 L 255,434 L 345,402.5 L 435,371 L 525,344 L 615,326 L 705,299 L 795,281 L 885,312.5 L 975,339.5 L 1065,353 L 1155,326 |
| 111 | L 1155,560 Z" |
| 112 | fill="url(#areaGrad1)"/> |
| 113 | <!-- Line 1: PC --> |
| 114 | <path d="M 165,416 L 255,434 L 345,402.5 L 435,371 L 525,344 L 615,326 L 705,299 L 795,281 L 885,312.5 L 975,339.5 L 1065,353 L 1155,326" |
| 115 | fill="none" stroke="#3B82F6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> |
| 116 | <!-- Area 2: Mobile (Green) --> |
| 117 | <path d="M 165,560 |
| 118 | L 165,479 L 255,488 L 345,465.5 L 435,434 L 525,402.5 L 615,371 L 705,344 L 795,317 L 885,335 L 975,353 L 1065,366.5 L 1155,339.5 |
| 119 | L 1155,560 Z" |
| 120 | fill="url(#areaGrad2)"/> |
| 121 | <!-- Line 2: Mobile --> |
| 122 | <path d="M 165,479 L 255,488 L 345,465.5 L 435,434 L 525,402.5 L 615,371 L 705,344 L 795,317 L 885,335 L 975,353 L 1065,366.5 L 1155,339.5" |
| 123 | fill="none" stroke="#10B981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> |
| 124 | <!-- PC Data Points --> |
| 125 | <circle cx="165" cy="416" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 126 | <circle cx="255" cy="434" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 127 | <circle cx="345" cy="402.5" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 128 | <circle cx="435" cy="371" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 129 | <circle cx="525" cy="344" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 130 | <circle cx="615" cy="326" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 131 | <circle cx="705" cy="299" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 132 | <circle cx="795" cy="281" r="6" fill="#3B82F6" stroke="#FFFFFF" stroke-width="2"/> |
| 133 | <circle cx="885" cy="312.5" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 134 | <circle cx="975" cy="339.5" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 135 | <circle cx="1065" cy="353" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 136 | <circle cx="1155" cy="326" r="5" fill="#FFFFFF" stroke="#3B82F6" stroke-width="2"/> |
| 137 | <!-- Mobile Data Points --> |
| 138 | <circle cx="165" cy="479" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 139 | <circle cx="255" cy="488" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 140 | <circle cx="345" cy="465.5" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 141 | <circle cx="435" cy="434" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 142 | <circle cx="525" cy="402.5" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 143 | <circle cx="615" cy="371" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 144 | <circle cx="705" cy="344" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 145 | <circle cx="795" cy="317" r="6" fill="#10B981" stroke="#FFFFFF" stroke-width="2"/> |
| 146 | <circle cx="885" cy="335" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 147 | <circle cx="975" cy="353" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 148 | <circle cx="1065" cy="366.5" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 149 | <circle cx="1155" cy="339.5" r="5" fill="#FFFFFF" stroke="#10B981" stroke-width="2"/> |
| 150 | <!-- Peak Label (Aug) --> |
| 151 | <g> |
| 152 | <rect x="755" y="225" width="80" height="45" rx="6" fill="#3B82F6"/> |
| 153 | <text x="795" y="245" |
| 154 | font-size="14" font-weight="600" fill="#FFFFFF" text-anchor="middle">Peak</text> |
| 155 | <text x="795" y="262" |
| 156 | font-size="13" fill="#FFFFFF" text-anchor="middle">6.2M</text> |
| 157 | <path d="M 795,270 L 790,281 L 800,281 Z" fill="#3B82F6"/> |
| 158 | </g> |
| 159 | </g> |
| 160 | </g> |
| 161 | <!-- Stat Cards --> |
| 162 | <g id="statsCards" transform="translate(60, 620)" data-pptx-bounds="60 620 800 70"> |
| 163 | <!-- Card 1: Total Visits --> |
| 164 | <g id="card-total-visits"> |
| 165 | <rect x="0" y="0" width="200" height="70" rx="8" fill="#F8F9FA" stroke="#E0E0E0" stroke-width="1"/> |
| 166 | <text x="20" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 167 | font-size="14" fill="#64748B">Total Annual Visits</text> |
| 168 | <text x="20" y="55" |
| 169 | font-size="24" font-weight="bold" fill="#0F172A">102.4M</text> |
| 170 | </g> |
| 171 | <!-- Card 2: PC Share --> |
| 172 | <g id="card-pc-share"> |
| 173 | <rect x="220" y="0" width="180" height="70" rx="8" fill="#EFF6FF" stroke="#3B82F6" stroke-width="1"/> |
| 174 | <text x="240" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 175 | font-size="14" fill="#2563EB">PC Share</text> |
| 176 | <text x="240" y="55" |
| 177 | font-size="24" font-weight="bold" fill="#3B82F6">55.8%</text> |
| 178 | </g> |
| 179 | <!-- Card 3: Mobile Share --> |
| 180 | <g id="card-mobile-share"> |
| 181 | <rect x="420" y="0" width="180" height="70" rx="8" fill="#ECFDF5" stroke="#34D399" stroke-width="1"/> |
| 182 | <text x="440" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 183 | font-size="14" fill="#059669">Mobile Share</text> |
| 184 | <text x="440" y="55" |
| 185 | font-size="24" font-weight="bold" fill="#34D399">44.2%</text> |
| 186 | </g> |
| 187 | <!-- Card 4: YoY Growth --> |
| 188 | <g id="card-yoy-growth"> |
| 189 | <rect x="620" y="0" width="180" height="70" rx="8" fill="#FFFBEB" stroke="#F59E0B" stroke-width="1"/> |
| 190 | <text x="640" y="25" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 191 | font-size="14" fill="#D97706">YoY Growth</text> |
| 192 | <text x="640" y="55" |
| 193 | font-size="24" font-weight="bold" fill="#F59E0B">+23.5%</text> |
| 194 | </g> |
| 195 | </g> |
| 196 | <!-- Data Source --> |
| 197 | <g id="source" data-pptx-bounds="900 675 320 25" |
| 198 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif"> |
| 199 | <text x="1220" y="695" font-size="14" fill="#94A3B8" text-anchor="end">Data Source: Website Analytics Platform</text> |
| 200 | </g> |
| 201 | </svg> |
| 202 |