| 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 | Donut Chart Template |
| 6 | Usage: Proportion and composition analysis |
| 7 | Scenarios: Market share, budget allocation, structural analysis |
| 8 | Supports: 5 segments (3-6 recommended) |
| 9 | Convention: slices start at 12 o'clock and proceed clockwise |
| 10 | --> |
| 11 | <!-- Background --> |
| 12 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 13 | <!-- Title --> |
| 14 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 15 | <text x="60" y="80" |
| 16 | font-size="34" font-weight="bold" fill="#0F172A">Product Line Revenue Share</text> |
| 17 | <text x="60" y="115" |
| 18 | font-size="18" fill="#64748B">Q3 2025 · Total Revenue $520M</text> |
| 19 | </g> |
| 20 | <g id="donut_chart" data-pptx-bounds="27 139 716 479" data-pptx-replace-with="chart"> |
| 21 | <metadata type="application/json"> |
| 22 | { |
| 23 | "name": "donut_chart", |
| 24 | "x": 140, |
| 25 | "y": 165, |
| 26 | "width": 523, |
| 27 | "height": 385, |
| 28 | "type": "doughnut", |
| 29 | "categories": ["Enterprise Services", "Consumer Electronics", "Cloud Computing", "IoT", "Others"], |
| 30 | "series": [ |
| 31 | {"name": "Revenue", "values": [182, 146, 104, 62, 26]} |
| 32 | ], |
| 33 | "style": {"colors": ["#3B82F6", "#10B981", "#F59E0B", "#8B5CF6", "#CBD5E1"]} |
| 34 | } |
| 35 | </metadata> |
| 36 | <!-- chart-plot-area: donut | center: 400,410 | outer-radius: 180 | inner-radius: 100 --> |
| 37 | <!-- Donut Chart Center --> |
| 38 | <g id="donutChart" transform="translate(400, 410)"> |
| 39 | <!-- |
| 40 | Center: (400, 410) |
| 41 | Outer Radius: 180px |
| 42 | Inner Radius: 100px |
| 43 | Start Angle: -90° (12 o'clock) |
| 44 | Direction: Clockwise |
| 45 | Data: |
| 46 | 1. Enterprise Services: 35% (Blue #3B82F6) - Angle: 126° |
| 47 | 2. Consumer Electronics: 28% (Green #10B981) - Angle: 100.8° |
| 48 | 3. Cloud Computing: 20% (Orange #F59E0B) - Angle: 72° |
| 49 | 4. IoT: 12% (Purple #8B5CF6) - Angle: 43.2° |
| 50 | 5. Others: 5% (Gray #CBD5E1) - Angle: 18° |
| 51 | --> |
| 52 | <g id="donut-sectors"> |
| 53 | <g id="sector-1"> |
| 54 | <!-- Sector 1: Enterprise Services 35% (From -90° to 36°) --> |
| 55 | <path d="M 0,-180 A 180,180 0 0,1 145.62,105.80 L 80.90,58.78 A 100,100 0 0,0 0,-100 Z" |
| 56 | fill="#3B82F6"/> |
| 57 | </g> |
| 58 | <g id="sector-2"> |
| 59 | <!-- Sector 2: Consumer Electronics 28% (From 36° to 136.8°) --> |
| 60 | <path d="M 145.62,105.80 A 180,180 0 0,1 -131.21,123.22 L -72.90,68.45 A 100,100 0 0,0 80.90,58.78 Z" |
| 61 | fill="#10B981"/> |
| 62 | </g> |
| 63 | <g id="sector-3"> |
| 64 | <!-- Sector 3: Cloud Computing 20% (From 136.8° to 208.8°) --> |
| 65 | <path d="M -131.21,123.22 A 180,180 0 0,1 -157.74,-86.72 L -87.63,-48.18 A 100,100 0 0,0 -72.90,68.45 Z" |
| 66 | fill="#F59E0B"/> |
| 67 | </g> |
| 68 | <g id="sector-4"> |
| 69 | <!-- Sector 4: IoT 12% (From 208.8° to 252°) --> |
| 70 | <path d="M -157.74,-86.72 A 180,180 0 0,1 -55.62,-171.19 L -30.90,-95.11 A 100,100 0 0,0 -87.63,-48.18 Z" |
| 71 | fill="#8B5CF6"/> |
| 72 | </g> |
| 73 | <g id="sector-5"> |
| 74 | <!-- Sector 5: Others 5% (From 252° to 270°/360°-90°) --> |
| 75 | <path d="M -55.62,-171.19 A 180,180 0 0,1 0,-180 L 0,-100 A 100,100 0 0,0 -30.90,-95.11 Z" |
| 76 | fill="#CBD5E1"/> |
| 77 | </g> |
| 78 | </g> |
| 79 | <!-- Center White Circle --> |
| 80 | <circle cx="0" cy="0" r="100" fill="#FFFFFF"/> |
| 81 | <!-- Center Text --> |
| 82 | <text x="0" y="-15" |
| 83 | font-size="48" font-weight="bold" fill="#0F172A" text-anchor="middle">$520M</text> |
| 84 | <text x="0" y="20" |
| 85 | font-size="18" fill="#64748B" text-anchor="middle">Total Revenue</text> |
| 86 | </g> |
| 87 | <g id="labels"> |
| 88 | <!-- Percentage Labels --> |
| 89 | <!-- Label 1: Enterprise Services 35% --> |
| 90 | <g id="label-1"> |
| 91 | <line x1="530" y1="295" x2="620" y2="250" stroke="#3B82F6" stroke-width="1.5"/> |
| 92 | <circle cx="530" cy="295" r="3" fill="#3B82F6"/> |
| 93 | <text x="630" y="255" |
| 94 | font-size="20" font-weight="600" fill="#3B82F6">35%</text> |
| 95 | </g> |
| 96 | <!-- Label 2: Consumer Electronics 28% --> |
| 97 | <g id="label-2"> |
| 98 | <line x1="510" y1="500" x2="620" y2="540" stroke="#10B981" stroke-width="1.5"/> |
| 99 | <circle cx="510" cy="500" r="3" fill="#10B981"/> |
| 100 | <text x="630" y="545" |
| 101 | font-size="20" font-weight="600" fill="#10B981">28%</text> |
| 102 | </g> |
| 103 | <!-- Label 3: Cloud Computing 20% --> |
| 104 | <g id="label-3"> |
| 105 | <line x1="250" y1="480" x2="150" y2="520" stroke="#F59E0B" stroke-width="1.5"/> |
| 106 | <circle cx="250" cy="480" r="3" fill="#F59E0B"/> |
| 107 | <text x="140" y="525" |
| 108 | font-size="20" font-weight="600" fill="#F59E0B" text-anchor="end">20%</text> |
| 109 | </g> |
| 110 | <!-- Label 4: IoT 12% --> |
| 111 | <g id="label-4"> |
| 112 | <line x1="310" y1="265" x2="200" y2="220" stroke="#8B5CF6" stroke-width="1.5"/> |
| 113 | <circle cx="310" cy="265" r="3" fill="#8B5CF6"/> |
| 114 | <text x="190" y="225" |
| 115 | font-size="20" font-weight="600" fill="#8B5CF6" text-anchor="end">12%</text> |
| 116 | </g> |
| 117 | <!-- Label 5: Others 5% --> |
| 118 | <g id="label-5"> |
| 119 | <line x1="375" y1="240" x2="340" y2="180" stroke="#CBD5E1" stroke-width="1.5"/> |
| 120 | <circle cx="375" cy="240" r="3" fill="#CBD5E1"/> |
| 121 | <text x="330" y="185" |
| 122 | font-size="20" font-weight="600" fill="#94A3B8" text-anchor="end">5%</text> |
| 123 | </g> |
| 124 | </g> |
| 125 | </g> |
| 126 | <!-- Right Detail List --> |
| 127 | <g id="detailList" data-pptx-bounds="670 168 595 464"> |
| 128 | <!-- List Background Card --> |
| 129 | <rect x="730" y="195" width="475" height="410" rx="12" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1"/> |
| 130 | <!-- List Title --> |
| 131 | <text x="750" y="225" |
| 132 | font-size="22" font-weight="600" fill="#0F172A">Detailed Data</text> |
| 133 | <line x1="750" y1="238" x2="1185" y2="238" stroke="#E2E8F0" stroke-width="1"/> |
| 134 | <g id="list-items"> |
| 135 | <g id="item-1"> |
| 136 | <!-- Item 1: Enterprise Services --> |
| 137 | <rect x="750" y="250" width="8" height="40" rx="4" fill="#3B82F6"/> |
| 138 | <text x="775" y="270" |
| 139 | font-size="18" fill="#475569">Enterprise Services</text> |
| 140 | <text x="1100" y="270" |
| 141 | font-size="20" font-weight="600" fill="#0F172A" text-anchor="end">$182M</text> |
| 142 | <text x="1180" y="270" |
| 143 | font-size="18" fill="#3B82F6" text-anchor="end">35%</text> |
| 144 | <line x1="750" y1="300" x2="1185" y2="300" stroke="#F1F5F9" stroke-width="1"/> |
| 145 | </g> |
| 146 | <g id="item-2"> |
| 147 | <!-- Item 2: Consumer Electronics --> |
| 148 | <rect x="750" y="310" width="8" height="40" rx="4" fill="#10B981"/> |
| 149 | <text x="775" y="330" |
| 150 | font-size="18" fill="#475569">Consumer Electronics</text> |
| 151 | <text x="1100" y="330" |
| 152 | font-size="20" font-weight="600" fill="#0F172A" text-anchor="end">$146M</text> |
| 153 | <text x="1180" y="330" |
| 154 | font-size="18" fill="#10B981" text-anchor="end">28%</text> |
| 155 | <line x1="750" y1="360" x2="1185" y2="360" stroke="#F1F5F9" stroke-width="1"/> |
| 156 | </g> |
| 157 | <g id="item-3"> |
| 158 | <!-- Item 3: Cloud Computing --> |
| 159 | <rect x="750" y="370" width="8" height="40" rx="4" fill="#F59E0B"/> |
| 160 | <text x="775" y="390" |
| 161 | font-size="18" fill="#475569">Cloud Computing</text> |
| 162 | <text x="1100" y="390" |
| 163 | font-size="20" font-weight="600" fill="#0F172A" text-anchor="end">$104M</text> |
| 164 | <text x="1180" y="390" |
| 165 | font-size="18" fill="#F59E0B" text-anchor="end">20%</text> |
| 166 | <line x1="750" y1="420" x2="1185" y2="420" stroke="#F1F5F9" stroke-width="1"/> |
| 167 | </g> |
| 168 | <g id="item-4"> |
| 169 | <!-- Item 4: IoT --> |
| 170 | <rect x="750" y="430" width="8" height="40" rx="4" fill="#8B5CF6"/> |
| 171 | <text x="775" y="450" |
| 172 | font-size="18" fill="#475569">IoT</text> |
| 173 | <text x="1100" y="450" |
| 174 | font-size="20" font-weight="600" fill="#0F172A" text-anchor="end">$62M</text> |
| 175 | <text x="1180" y="450" |
| 176 | font-size="18" fill="#8B5CF6" text-anchor="end">12%</text> |
| 177 | <line x1="750" y1="480" x2="1185" y2="480" stroke="#F1F5F9" stroke-width="1"/> |
| 178 | </g> |
| 179 | <g id="item-5"> |
| 180 | <!-- Item 5: Others --> |
| 181 | <rect x="750" y="490" width="8" height="40" rx="4" fill="#CBD5E1"/> |
| 182 | <text x="775" y="510" |
| 183 | font-size="18" fill="#475569">Others</text> |
| 184 | <text x="1100" y="510" |
| 185 | font-size="20" font-weight="600" fill="#0F172A" text-anchor="end">$26M</text> |
| 186 | <text x="1180" y="510" |
| 187 | font-size="18" fill="#94A3B8" text-anchor="end">5%</text> |
| 188 | </g> |
| 189 | </g> |
| 190 | <!-- Separator Line --> |
| 191 | <line x1="750" y1="550" x2="1185" y2="550" stroke="#E2E8F0" stroke-width="1.5"/> |
| 192 | <!-- Total --> |
| 193 | <text x="775" y="580" |
| 194 | font-size="18" font-weight="600" fill="#0F172A">Total</text> |
| 195 | <text x="1100" y="580" |
| 196 | font-size="20" font-weight="bold" fill="#0F172A" text-anchor="end">$520M</text> |
| 197 | <text x="1180" y="580" |
| 198 | font-size="18" font-weight="600" fill="#0F172A" text-anchor="end">100%</text> |
| 199 | </g> |
| 200 | <!-- Data Source --> |
| 201 | <g id="source" data-pptx-bounds="40 670 1200 40"> |
| 202 | <text x="60" y="695" |
| 203 | font-size="14" fill="#94A3B8">Data Source: Finance Department Quarterly Report</text> |
| 204 | </g> |
| 205 | </svg> |
| 206 |