<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Highcharts 3D 饼图</title><script src="https://cdn.tailwindcss.com"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"rel="stylesheet"/><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/highcharts-3d.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script><script>tailwind.config = {theme: {extend: {colors: {primary: "#165DFF",secondary: "#36CBCB",accent: "#FF7D00",neutral: "#F5F7FA",dark: "#1D2129",},fontFamily: {inter: ["Inter", "sans-serif"],},},},};</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.chart-container {@apply bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;}.card-hover {@apply transition-all duration-300 hover:scale-[1.02] hover:shadow-lg;}}</style></head><body class="bg-gray-50 font-inter text-dark"><div class="min-h-screen flex flex-col"><!-- 顶部导航 --><header class="bg-white shadow-sm sticky top-0 z-50"><divclass="container mx-auto px-4 py-3 flex items-center justify-between"><div class="flex items-center space-x-2"><i class="fa-solid fa-chart-pie text-primary text-2xl"></i><h1 class="text-xl font-bold text-dark">数据可视化中心</h1></div><nav><ul class="flex space-x-6"><li><ahref="#"class="text-gray-600 hover:text-primary transition-colors">首页</a></li><li><a href="#" class="text-primary font-medium">图表</a></li><li><ahref="#"class="text-gray-600 hover:text-primary transition-colors">报告</a></li><li><ahref="#"class="text-gray-600 hover:text-primary transition-colors">设置</a></li></ul></nav></div></header><!-- 主要内容 --><main class="flex-grow container mx-auto px-4 py-8"><div class="mb-6"><h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">销售数据 3D 饼图分析</h2><p class="text-gray-600">实时展示各产品类别的销售占比情况</p></div><div class="grid grid-cols-1 lg:grid-cols-3 gap-6"><!-- 饼图卡片 --><div class="lg:col-span-2 chart-container"><div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold text-dark">产品销售占比</h3><div class="flex space-x-2"><buttonclass="bg-primary/10 text-primary px-3 py-1 rounded-md text-sm flex items-center hover:bg-primary/20 transition-colors"><i class="fa-solid fa-download mr-1"></i> 导出</button><buttonclass="bg-neutral px-3 py-1 rounded-md text-sm flex items-center hover:bg-gray-200 transition-colors"><i class="fa-solid fa-refresh mr-1"></i> 刷新</button></div></div><div id="pie-chart" class="w-full h-[400px]"></div></div><!-- 数据卡片 --><div class="space-y-6"><div class="bg-white rounded-xl shadow-md p-5 card-hover"><div class="flex justify-between items-start"><div><p class="text-gray-500 text-sm">总销售额</p><h4 class="text-2xl font-bold mt-1">¥1,286,500</h4><p class="text-green-500 text-sm mt-1 flex items-center"><i class="fa-solid fa-arrow-up mr-1"></i> 12.5%<span class="text-gray-500 ml-1">vs 上月</span></p></div><divclass="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"><i class="fa-solid fa-line-chart text-primary"></i></div></div></div><div class="bg-white rounded-xl shadow-md p-5 card-hover"><div class="flex justify-between items-start"><div><p class="text-gray-500 text-sm">畅销产品</p><h4 class="text-xl font-bold mt-1">电子产品</h4><p class="text-gray-700 text-sm mt-1">占比 38.2%</p></div><divclass="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center"><i class="fa-solid fa-trophy text-secondary"></i></div></div></div><div class="bg-white rounded-xl shadow-md p-5 card-hover"><div class="flex justify-between items-start"><div><p class="text-gray-500 text-sm">增长最快</p><h4 class="text-xl font-bold mt-1">家居用品</h4><p class="text-green-500 text-sm mt-1 flex items-center"><i class="fa-solid fa-arrow-up mr-1"></i> 24.8%<span class="text-gray-500 ml-1">同比</span></p></div><divclass="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center"><i class="fa-solid fa-rocket text-accent"></i></div></div></div></div></div><!-- 详细数据表格 --><div class="mt-8 bg-white rounded-xl shadow-lg p-6"><h3 class="text-lg font-semibold text-dark mb-4">销售数据明细</h3><div class="overflow-x-auto"><table class="w-full min-w-[640px]"><thead><tr class="border-b border-gray-200"><thclass="py-3 px-4 text-left text-sm font-medium text-gray-500">产品类别</th><thclass="py-3 px-4 text-right text-sm font-medium text-gray-500">销售额</th><thclass="py-3 px-4 text-right text-sm font-medium text-gray-500">占比</th><thclass="py-3 px-4 text-right text-sm font-medium text-gray-500">同比增长</th></tr></thead><tbody><trclass="border-b border-gray-100 hover:bg-gray-50 transition-colors"><td class="py-3 px-4 text-sm">电子产品</td><td class="py-3 px-4 text-sm text-right">¥491,443</td><td class="py-3 px-4 text-sm text-right">38.2%</td><td class="py-3 px-4 text-sm text-right text-green-500">+18.3%</td></tr><trclass="border-b border-gray-100 hover:bg-gray-50 transition-colors"><td class="py-3 px-4 text-sm">服装鞋帽</td><td class="py-3 px-4 text-sm text-right">¥321,625</td><td class="py-3 px-4 text-sm text-right">25.0%</td><td class="py-3 px-4 text-sm text-right text-green-500">+12.1%</td></tr><trclass="border-b border-gray-100 hover:bg-gray-50 transition-colors"><td class="py-3 px-4 text-sm">家居用品</td><td class="py-3 px-4 text-sm text-right">¥256,613</td><td class="py-3 px-4 text-sm text-right">20.0%</td><td class="py-3 px-4 text-sm text-right text-green-500">+24.8%</td></tr><trclass="border-b border-gray-100 hover:bg-gray-50 transition-colors"><td class="py-3 px-4 text-sm">食品饮料</td><td class="py-3 px-4 text-sm text-right">¥154,380</td><td class="py-3 px-4 text-sm text-right">12.0%</td><td class="py-3 px-4 text-sm text-right text-green-500">+8.7%</td></tr><tr class="hover:bg-gray-50 transition-colors"><td class="py-3 px-4 text-sm">其他产品</td><td class="py-3 px-4 text-sm text-right">¥62,439</td><td class="py-3 px-4 text-sm text-right">4.8%</td><td class="py-3 px-4 text-sm text-right text-red-500">-2.1%</td></tr></tbody></table></div></div></main><!-- 页脚 --><footer class="bg-white border-t border-gray-200 py-6"><div class="container mx-auto px-4 text-center text-gray-500 text-sm"><p>© 2025 数据可视化中心. 保留所有权利.</p></div></footer></div><script>document.addEventListener("DOMContentLoaded", function () {Highcharts.chart("pie-chart", {chart: {type: "pie",options3d: {enabled: true,alpha: 45,beta: 0,},backgroundColor: "transparent",events: {load: function () {this.container.classList.add("animate-fadeIn");},},},title: {text: "产品销售占比分析",align: "left",style: {fontSize: "1.2rem",fontWeight: "600",color: "#1D2129",},},subtitle: {text: "2025年第二季度",align: "left",style: {color: "#6B7280",},},tooltip: {pointFormat:"{series.name}: <b>{point.percentage:.1f}%</b><br>销售额: <b>¥{point.y:,.0f}</b>",backgroundColor: "rgba(255, 255, 255, 0.95)",borderColor: "#E5E7EB",shadow: true,style: {fontFamily: "Inter, sans-serif",},},accessibility: {point: {valueSuffix: "%",},},plotOptions: {pie: {allowPointSelect: true,cursor: "pointer",depth: 35,dataLabels: {enabled: true,format: "<b>{point.name}</b>: {point.percentage:.1f} %",style: {color: "#1D2129",fontFamily: "Inter, sans-serif",},},showInLegend: true,states: {hover: {enabled: true,halo: {size: 5,opacity: 0.2,},},},animation: {duration: 1000,easing: "easeOutCubic",},},},series: [{name: "占比",colorByPoint: true,data: [{ name: "电子产品", y: 491443, color: "#165DFF" },{ name: "服装鞋帽", y: 321625, color: "#36CBCB" },{ name: "家居用品", y: 256613, color: "#FF7D00" },{ name: "食品饮料", y: 154380, color: "#722ED1" },{ name: "其他产品", y: 62439, color: "#86909C" },],},],legend: {layout: "vertical",align: "right",verticalAlign: "middle",itemStyle: {fontFamily: "Inter, sans-serif",color: "#1D2129",},itemHoverStyle: {color: "#165DFF",},symbolRadius: 3,},exporting: {buttons: {contextButton: {theme: {fill: "transparent","stroke-width": 0,stroke: "transparent",r: 0,states: {hover: {fill: "#F5F7FA",},select: {stroke: "transparent",fill: "#F5F7FA",},},},},},},});document.head.insertAdjacentHTML("beforeend",`<style>@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}.animate-fadeIn {animation: fadeIn 0.5s ease-out forwards;}</style>`);});</script></body>
</html>
