0.3.0.0

components/dashboard/statistics-charts.tsx

@@ -1,10 +1,32 @@
 "use client"
 
 import { useEffect, useRef } from "react"
-import * as echarts from "echarts"
+// 显式导入 ECharts 核心和渲染器
+import * as echarts from "echarts/core"
+import { PieChart, BarChart, LineChart } from "echarts/charts"
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from "echarts/components"
+import { CanvasRenderer } from "echarts/renderers"
+import { graphic } from "echarts/core"
 import type { FamilyMember } from "@/types/family"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 
+// 注册必要的组件
+echarts.use([
+  PieChart,
+  BarChart,
+  LineChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  CanvasRenderer,
+])
+
 interface StatisticsChartsProps {
   members: FamilyMember[]
 }
@@ -133,7 +155,7 @@ export function StatisticsCharts({ members }: StatisticsChartsProps) {
           type: 'bar',
           data: sortedGenerations.map(([, count]) => count),
           itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            color: new graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#83bff6' },
               { offset: 0.5, color: '#188df0' },
               { offset: 1, color: '#188df0' }
@@ -141,7 +163,7 @@ export function StatisticsCharts({ members }: StatisticsChartsProps) {
           },
           emphasis: {
             itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#2378f7' },
                 { offset: 0.7, color: '#2378f7' },
                 { offset: 1, color: '#83bff6' }
@@ -285,7 +307,7 @@ export function StatisticsCharts({ members }: StatisticsChartsProps) {
           data: sortedYears.map(([, count]) => count),
           smooth: true,
           areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            color: new graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(99, 102, 241, 0.5)' },
               { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
             ])