feat: 添加echarts

package.json

@@ -22,7 +22,7 @@
     "axios": "^1.7.9",
     "boxen": "^8.0.1",
     "dayjs": "^1.11.13",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",

pnpm-lock.yaml

@@ -39,7 +39,7 @@ importers:
         specifier: ^1.11.13
         version: 1.11.13
       echarts:
-        specifier: ^5.5.1
+        specifier: ^5.6.0
         version: 5.6.0
       eslint:
         specifier: ^9.9.1

src/main.ts

@@ -9,4 +9,6 @@ import plugins from '@/plugins';
 
 import App from './App.vue';
 
-createApp(App).use(plugins).mount('#app');
+const app = createApp(App);
+
+app.use(plugins).mount('#app');

src/plugins/echarts.ts

@@ -0,0 +1,44 @@
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  PolarComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+import type { App } from 'vue';
+
+const { use } = echarts;
+
+use([
+  PieChart,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  SVGRenderer,
+  GridComponent,
+  TitleComponent,
+  PolarComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+]);
+
+/**
+ * @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
+ * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
+ */
+export function useEcharts(app: App) {
+  app.config.globalProperties.$echarts = echarts;
+}
+
+export default echarts;

src/plugins/index.ts

@@ -12,5 +12,7 @@ export default {
     setupStore(app);
     // 设置指令
     setupDirective(app);
+    // 根据需求引入echarts
+    // useEcharts(app);
   },
 };