perf: echarts 按需导入,分散注册到具体使用页面
- 移除 main.ts 中 echarts 全量导入和集中注册 - chart/index.vue 仅导入 init,改用 ReturnType 推断类型 - DataReportPage.vue 按需注册 LineChart/PieChart/RadarChart 及组件 - CanvasRenderer 保持全局注册,所有图表共用 - 主 chunk 减小 55%(1,279 kB → 572 kB),echarts 模块随页面懒加载
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
11
src/main.ts
11
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);
|
||||
|
||||
|
||||
@@ -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 = "近一周" | "近一个月" | "近三个月";
|
||||
|
||||
Reference in New Issue
Block a user