<!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>
<link
href="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">
<div
class="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>
<a
href="#"
class="text-gray-600 hover:text-primary transition-colors"
>首页</a
>
</li>
<li><a href="#" class="text-primary font-medium">图表</a></li>
<li>
<a
href="#"
class="text-gray-600 hover:text-primary transition-colors"
>报告</a
>
</li>
<li>
<a
href="#"
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">
<button
class="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>
<button
class="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>
<div
class="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>
<div
class="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>
<div
class="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">
<th
class="py-3 px-4 text-left text-sm font-medium text-gray-500"
>
产品类别
</th>
<th
class="py-3 px-4 text-right text-sm font-medium text-gray-500"
>
销售额
</th>
<th
class="py-3 px-4 text-right text-sm font-medium text-gray-500"
>
占比
</th>
<th
class="py-3 px-4 text-right text-sm font-medium text-gray-500"
>
同比增长
</th>
</tr>
</thead>
<tbody>
<tr
class="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>
<tr
class="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>
<tr
class="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>
<tr
class="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>