From 61e105def27513705e0501dc1e586af823007714 Mon Sep 17 00:00:00 2001
From: huaqiang <chenhuaqiang1998@qq.com>
Date: Wed, 12 Aug 2026 14:20:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20echarts=20=E6=8C=89=E9=9C=80=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=EF=BC=8C=E5=88=86=E6=95=A3=E6=B3=A8=E5=86=8C=E5=88=B0?=
 =?UTF-8?q?=E5=85=B7=E4=BD=93=E4=BD=BF=E7=94=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 main.ts 中 echarts 全量导入和集中注册
- chart/index.vue 仅导入 init，改用 ReturnType 推断类型
- DataReportPage.vue 按需注册 LineChart/PieChart/RadarChart 及组件
- CanvasRenderer 保持全局注册，所有图表共用
- 主 chunk 减小 55%（1,279 kB → 572 kB），echarts 模块随页面懒加载
---
 src/components/chart/index.vue                |  8 ++++----
 src/main.ts                                   | 11 ++++++++---
 src/views/dashboard1/pages/DataReportPage.vue | 11 +++++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/chart/index.vue b/src/components/chart/index.vue
index c0c44cc..b9b244e 100644
--- a/src/components/chart/index.vue
+++ b/src/components/chart/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
-import * as echarts from "echarts";
-import { EChartsOption } from "echarts";
+import { init } from "echarts/core";
+import type { EChartsOption } from "echarts";
 
-let chart: echarts.ECharts | null = null;
+let chart: ReturnType<typeof init> | null = null;
 
 const chartRef = ref<HTMLElement | undefined>();
 
@@ -24,7 +24,7 @@ function applyOption(option?: EChartsOption | Record<string, never>) {
 }
 
 onMounted(() => {
-  chart = echarts.init(chartRef.value, "t-theme");
+  chart = init(chartRef.value, "t-theme");
   applyOption(props.option);
 });
 
diff --git a/src/main.ts b/src/main.ts
index dccbe1c..25e44ec 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,13 +2,18 @@ import { createApp } from "vue";
 import "./style.less";
 import App from "./App.vue";
 import Chart from "./components/chart/index.vue";
-import * as echarts from "echarts";
+import { registerTheme } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
 import echartsConfig from "./config/echarts.config";
 import { createPinia } from "pinia";
 import router from "./router";
-import './router/routerGuard'
+import "./router/routerGuard";
 
-echarts.registerTheme("t-theme", echartsConfig);
+// CanvasRenderer 注册到全局，所有图表都需要
+import { use } from "echarts/core";
+use([CanvasRenderer]);
+
+registerTheme("t-theme", echartsConfig);
 
 const app = createApp(App);
 
diff --git a/src/views/dashboard1/pages/DataReportPage.vue b/src/views/dashboard1/pages/DataReportPage.vue
index bb29906..8139c76 100644
--- a/src/views/dashboard1/pages/DataReportPage.vue
+++ b/src/views/dashboard1/pages/DataReportPage.vue
@@ -3,6 +3,17 @@ import { computed, ref } from "vue";
 import type { EChartsOption } from "echarts";
 import Chart from "@/components/chart/index.vue";
 
+// 按需注册 DataReportPage 使用的图表类型和组件
+import { use } from "echarts/core";
+import { LineChart, PieChart, RadarChart } from "echarts/charts";
+import {
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+} from "echarts/components";
+use([LineChart, PieChart, RadarChart]);
+use([TooltipComponent, GridComponent, LegendComponent]);
+
 type AlarmStatus = "待研判" | "待处理" | "处置完成" | "误判";
 type ProjectName = "西江隧道" | "青云隧道" | "南山隧道";
 type DistributionRange = "近一周" | "近一个月" | "近三个月";