网站搭建完成第一版

website/src/components/RosePieChart.jsx

@@ -8,11 +8,8 @@ const chartData = [
   { value: 25, name: '商咖五级进阶' },
 ];
 
-const color = '#004ec4';
+const color = '#043b8f';
 
-// ECharts startAngle=90, 各扇形视觉中心 (0°=12点, 顺时针)
-// slice0: 1:30(45°)  slice1: 4:30(135°)  slice2: 7:30(225°)  slice3: 10:30(315°)
-// 要让选中扇形中心对准右侧90°(3点方向), CSS rotate需要的角度
 const rotationNeeded = [45, -45, -135, -225];
 
 function normalizeAngle(a) {
@@ -34,7 +31,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
   const rotationRef = useRef(0);
   const [rotation, setRotation] = useState(0);
 
-  // 初始化图表（只执行一次）
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -43,10 +39,10 @@ export default function RosePieChart({ onSelect, activeIndex }) {
     chartRef.current.setOption({
       tooltip: {
         trigger: 'item',
-        backgroundColor: '#fff',
-        borderColor: '#e2e8f0',
+        backgroundColor: 'rgba(10,22,40,0.95)',
+        borderColor: 'rgba(59,130,246,0.3)',
         borderWidth: 1,
-        textStyle: { color: '#334155', fontSize: 13 },
+        textStyle: { color: '#e2e8f0', fontSize: 13 },
         formatter: '{b}',
       },
       series: [{
@@ -54,35 +50,34 @@ export default function RosePieChart({ onSelect, activeIndex }) {
         radius: ['20%', '68%'],
         center: ['50%', '50%'],
         startAngle: 90,
-        padAngle: 2,
-        itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 3 },
+        padAngle: 3,
+        itemStyle: { borderRadius: 6, borderWidth: 0 },
         label: {
           show: true,
           position: 'inside',
-          color: '#004ec4',
-          fontSize: 16,
+          color: '#e2e8f0',
+          fontSize: 15,
           fontWeight: 'bold',
           rotate: 'tangential',
           formatter: '{b}',
         },
         emphasis: {
-          scaleSize: 10,
+          scaleSize: 12,
           itemStyle: {
-            color: '#0088cc',
-            shadowBlur: 30,
-            shadowColor: 'rgba(0,78,196,0.35)',
-            borderColor: '#fff',
-            borderWidth: 4,
+            shadowBlur: 40,
+            shadowColor: 'rgba(59,130,246,0.5)',
+            borderColor: 'rgba(59,130,246,0.6)',
+            borderWidth: 0,
           },
-          label: { fontSize: 15, fontWeight: 'bold', color: '#0f172a' },
+          label: { fontSize: 14, fontWeight: 'bold', color: '#fff' },
         },
-        data: chartData.map(d => ({
+        data: chartData.map((d, i) => ({
           ...d,
-          itemStyle: { color, opacity: 1, borderRadius: 4, borderColor: '#fff', borderWidth: 3 },
+          itemStyle: { color, opacity: 1, borderRadius: 6, borderWidth: 0 },
         })),
         animationType: 'scale',
         animationEasing: 'elasticOut',
-        animationDuration: 1000,
+        animationDuration: 1200,
       }],
     });
 
@@ -96,7 +91,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
     };
   }, []);
 
-  // 更新颜色高亮 + CSS旋转
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart) return;
@@ -112,20 +106,19 @@ export default function RosePieChart({ onSelect, activeIndex }) {
       series: [{
         data: chartData.map((d, i) => ({
           ...d,
-          label: { color: isActive && activeIndex === i ? '#fff' : '#004ec4' },
+          label: { color: isActive && activeIndex === i ? '#fff' : '#043b8f' },
           itemStyle: {
-            color: isActive && activeIndex !== i ? '#dfedf8' : color,
+            color: isActive && activeIndex !== i ? color + '30' : color,
             opacity: 1,
-            borderRadius: 4,
-            borderColor: '#fff',
-            borderWidth: 3,
+            borderRadius: 6,
+            borderColor: 'rgba(15,23,42,0.8)',
+            borderWidth: 0,
           },
         })),
       }],
     });
   }, [activeIndex]);
 
-  // 点击事件
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart) return;