From af04611d6cb66cd087cd650cd0441be541b6e134 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Tue, 28 Jun 2022 11:45:32 +0800
Subject: [PATCH] feat: add `@pureadmin/utils`
---
package.json | 3 +-
pnpm-lock.yaml | 80 ++++++++++++++++++---------
src/main.ts | 2 +
src/plugins/echarts/index.ts | 27 ++++++---
src/views/able/print.vue | 4 +-
src/views/welcome/components/Bar.vue | 61 +++++---------------
src/views/welcome/components/Line.vue | 61 +++++---------------
src/views/welcome/components/Pie.vue | 69 ++++++++---------------
src/views/welcome/components/index.ts | 38 -------------
src/views/welcome/index.vue | 16 ++++--
10 files changed, 143 insertions(+), 218 deletions(-)
delete mode 100644 src/views/welcome/components/index.ts
diff --git a/package.json b/package.json
index a4236ccfc..1342aec7c 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"@pureadmin/components": "^1.0.6",
"@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.1.0",
+ "@pureadmin/utils": "^0.0.11",
"@vueuse/core": "^8.7.4",
"@vueuse/motion": "^2.0.0-beta.12",
"@vueuse/shared": "^8.7.4",
@@ -141,7 +142,7 @@
"typescript": "^4.6.3",
"unocss": "^0.39.3",
"unplugin-vue-define-options": "^0.6.1",
- "vite": "^2.9.12",
+ "vite": "^2.9.13",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^1.0.0",
"vite-svg-loader": "^3.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16dd801fb..b08888087 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,7 @@ specifiers:
"@pureadmin/descriptions": ^1.1.0
"@pureadmin/table": ^1.1.0
"@pureadmin/theme": ^2.4.0
+ "@pureadmin/utils": ^0.0.11
"@types/element-resize-detector": 1.1.3
"@types/js-cookie": ^3.0.1
"@types/lodash": ^4.14.180
@@ -100,7 +101,7 @@ specifiers:
unocss: ^0.39.3
unplugin-vue-define-options: ^0.6.1
v-contextmenu: 3.0.0
- vite: ^2.9.12
+ vite: ^2.9.13
vite-plugin-mock: ^2.9.6
vite-plugin-remove-console: ^1.0.0
vite-svg-loader: ^3.3.0
@@ -127,6 +128,7 @@ dependencies:
"@pureadmin/components": 1.0.6_vue@3.2.37
"@pureadmin/descriptions": 1.1.0
"@pureadmin/table": 1.1.0
+ "@pureadmin/utils": 0.0.11_1a08b060e53473a36d1e6d099e1379e8
"@vueuse/core": 8.7.4_vue@3.2.37
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.37
"@vueuse/shared": 8.7.4_vue@3.2.37
@@ -186,7 +188,7 @@ devDependencies:
"@iconify-icons/ri": 1.2.1
"@iconify-icons/uil": 1.2.1
"@iconify/vue": 3.2.1_vue@3.2.37
- "@intlify/vite-plugin-vue-i18n": 3.4.0_4db44fd47112c2f2339201f09f303201
+ "@intlify/vite-plugin-vue-i18n": 3.4.0_54597aab0942c7003e7e717fbd1385ae
"@pureadmin/theme": 2.4.0
"@types/element-resize-detector": 1.1.3
"@types/js-cookie": 3.0.2
@@ -199,8 +201,8 @@ devDependencies:
"@types/qs": 6.9.7
"@typescript-eslint/eslint-plugin": 5.23.0_17b6d2ce7129f0b36f2c30ae592c16e7
"@typescript-eslint/parser": 5.23.0_eslint@8.15.0+typescript@4.6.4
- "@vitejs/plugin-legacy": 1.8.2_vite@2.9.12
- "@vitejs/plugin-vue": 2.3.3_vite@2.9.12+vue@3.2.37
+ "@vitejs/plugin-legacy": 1.8.2_vite@2.9.13
+ "@vitejs/plugin-vue": 2.3.3_vite@2.9.13+vue@3.2.37
"@vitejs/plugin-vue-jsx": 1.3.10
"@vue/eslint-config-prettier": 7.0.0_eslint@8.15.0+prettier@2.6.2
"@vue/eslint-config-typescript": 10.0.0_7f105dc3ebd31cec885fdbbd30d5cc4c
@@ -232,10 +234,10 @@ devDependencies:
stylelint-config-standard: 24.0.0_stylelint@14.8.2
stylelint-order: 5.0.0_stylelint@14.8.2
typescript: 4.6.4
- unocss: 0.39.3_vite@2.9.12
- unplugin-vue-define-options: 0.6.1_1faebec15bfd13576036847e0ecec82b
- vite: 2.9.12_sass@1.51.0
- vite-plugin-mock: 2.9.6_9f4d6c9d28564cba275b50667d1a1ad4
+ unocss: 0.39.3_vite@2.9.13
+ unplugin-vue-define-options: 0.6.1_5fada3a6f3735bf4f38c1ef9c2e1546a
+ vite: 2.9.13_sass@1.51.0
+ vite-plugin-mock: 2.9.6_0519d1ca589ef14c75821a546746fcf2
vite-plugin-remove-console: 1.0.0
vite-svg-loader: 3.3.0
vue-eslint-parser: 8.3.0_eslint@8.15.0
@@ -1200,7 +1202,7 @@ packages:
engines: { node: ">= 12" }
dev: false
- /@intlify/vite-plugin-vue-i18n/3.4.0_4db44fd47112c2f2339201f09f303201:
+ /@intlify/vite-plugin-vue-i18n/3.4.0_54597aab0942c7003e7e717fbd1385ae:
resolution:
{
integrity: sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA==
@@ -1222,7 +1224,7 @@ packages:
debug: 4.3.4
fast-glob: 3.2.11
source-map: 0.6.1
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
vue-i18n: 9.2.0-beta.36_vue@3.2.37
transitivePeerDependencies:
- supports-color
@@ -1391,6 +1393,32 @@ packages:
string-hash: 1.1.3
dev: true
+ /@pureadmin/utils/0.0.11_1a08b060e53473a36d1e6d099e1379e8:
+ resolution:
+ {
+ integrity: sha512-1DmkbCTrMKXXaW+Ws4w+ZkGnEQ87gZpwplevHE9G+9QgWYxxLbvhzYBMBuu0aE6EJ+/ynylFKOEFBtOi03pXNA==
+ }
+ peerDependencies:
+ china-area-data: "*"
+ dayjs: "*"
+ echarts: ^5.3.0
+ vue: ^3.2.0
+ peerDependenciesMeta:
+ china-area-data:
+ optional: true
+ dayjs:
+ optional: true
+ echarts:
+ optional: true
+ vue:
+ optional: true
+ dependencies:
+ china-area-data: 5.0.1
+ dayjs: 1.11.3
+ echarts: 5.3.3
+ vue: 3.2.37
+ dev: false
+
/@rollup/plugin-node-resolve/13.3.0_rollup@2.72.1:
resolution:
{
@@ -1924,7 +1952,7 @@ packages:
"@unocss/core": 0.39.3
dev: true
- /@unocss/vite/0.39.3_vite@2.9.12:
+ /@unocss/vite/0.39.3_vite@2.9.13:
resolution:
{
integrity: sha512-JT21v6ZwLCHPGVfjoWsOdSkMhFNiW2robhQke33WLlRGyT5U4K1SWLxNk+XPDbFdP+WZdcVJi5W5yG8Mm27WBw==
@@ -1939,7 +1967,7 @@ packages:
"@unocss/scope": 0.39.3
"@unocss/transformer-directives": 0.39.3
magic-string: 0.26.2
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
dev: true
/@uppy/companion-client/2.0.6:
@@ -1998,7 +2026,7 @@ packages:
nanoid: 3.3.4
dev: false
- /@vitejs/plugin-legacy/1.8.2_vite@2.9.12:
+ /@vitejs/plugin-legacy/1.8.2_vite@2.9.13:
resolution:
{
integrity: sha512-NCOKU+pU+cxLMR9P9RTolEuOK+h+zYBXlknj+zGcKSj/NXBZYgA1GAH1FnO4zijoWRiTaiOm2ha9LQrELE7XHg==
@@ -2012,7 +2040,7 @@ packages:
magic-string: 0.26.1
regenerator-runtime: 0.13.9
systemjs: 6.12.1
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
dev: true
/@vitejs/plugin-vue-jsx/1.3.10:
@@ -2032,7 +2060,7 @@ packages:
- supports-color
dev: true
- /@vitejs/plugin-vue/2.3.3_vite@2.9.12+vue@3.2.37:
+ /@vitejs/plugin-vue/2.3.3_vite@2.9.13+vue@3.2.37:
resolution:
{
integrity: sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
@@ -2042,7 +2070,7 @@ packages:
vite: ^2.5.10
vue: ^3.2.25
dependencies:
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
vue: 3.2.37
dev: true
@@ -8412,7 +8440,7 @@ packages:
engines: { node: ">= 10.0.0" }
dev: true
- /unocss/0.39.3_vite@2.9.12:
+ /unocss/0.39.3_vite@2.9.13:
resolution:
{
integrity: sha512-+BZazovI1A+jlW0+GuSSABHQjBLpu2sQkLXriBTdZiPYZAqJJdiWHuQ6VPzF4Al5WM4VPpOgX5mUYWusJ813qw==
@@ -8438,7 +8466,7 @@ packages:
"@unocss/transformer-compile-class": 0.39.3
"@unocss/transformer-directives": 0.39.3
"@unocss/transformer-variant-group": 0.39.3
- "@unocss/vite": 0.39.3_vite@2.9.12
+ "@unocss/vite": 0.39.3_vite@2.9.13
transitivePeerDependencies:
- supports-color
- vite
@@ -8449,7 +8477,7 @@ packages:
engines: { node: ">= 0.8" }
dev: true
- /unplugin-vue-define-options/0.6.1_1faebec15bfd13576036847e0ecec82b:
+ /unplugin-vue-define-options/0.6.1_5fada3a6f3735bf4f38c1ef9c2e1546a:
resolution:
{
integrity: sha512-YZQxE3vC7Tb4Ev10blfYPC23hR3t8UNynoVSt2bY9GtHB2usxpywPQqRj7xdUtuj6JsDfrZ9wRKKbEkcMEXI1A==
@@ -8460,7 +8488,7 @@ packages:
dependencies:
"@rollup/pluginutils": 4.2.1
"@vue/compiler-sfc": 3.2.33
- unplugin: 0.6.3_rollup@2.72.1+vite@2.9.12
+ unplugin: 0.6.3_rollup@2.72.1+vite@2.9.13
vue: 3.2.37
transitivePeerDependencies:
- esbuild
@@ -8469,7 +8497,7 @@ packages:
- webpack
dev: true
- /unplugin/0.6.3_rollup@2.72.1+vite@2.9.12:
+ /unplugin/0.6.3_rollup@2.72.1+vite@2.9.13:
resolution:
{
integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==
@@ -8491,7 +8519,7 @@ packages:
dependencies:
chokidar: 3.5.3
rollup: 2.72.1
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.3
dev: true
@@ -8559,7 +8587,7 @@ packages:
spdx-expression-parse: 3.0.1
dev: true
- /vite-plugin-mock/2.9.6_9f4d6c9d28564cba275b50667d1a1ad4:
+ /vite-plugin-mock/2.9.6_0519d1ca589ef14c75821a546746fcf2:
resolution:
{
integrity: sha512-/Rm59oPppe/ncbkSrUuAxIQihlI2YcBmnbR4ST1RA2VzM1C0tEQc1KlbQvnUGhXECAGTaQN2JyasiwXP6EtKgg==
@@ -8579,7 +8607,7 @@ packages:
fast-glob: 3.2.11
mockjs: 1.1.0
path-to-regexp: 6.2.1
- vite: 2.9.12_sass@1.51.0
+ vite: 2.9.13_sass@1.51.0
transitivePeerDependencies:
- rollup
- supports-color
@@ -8602,10 +8630,10 @@ packages:
svgo: 2.8.0
dev: true
- /vite/2.9.12_sass@1.51.0:
+ /vite/2.9.13_sass@1.51.0:
resolution:
{
- integrity: sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==
+ integrity: sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==
}
engines: { node: ">=12.2.0" }
hasBin: true
diff --git a/src/main.ts b/src/main.ts
index cd2493d0c..853e9561d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { useI18n } from "../src/plugins/i18n";
import { MotionPlugin } from "@vueuse/motion";
+import { useEcharts } from "/@/plugins/echarts";
import VirtualScroller from "vue-virtual-scroller";
import { useTable } from "../src/plugins/vxe-table";
import { injectResponsiveStorage } from "/@/utils/storage/responsive";
@@ -58,6 +59,7 @@ getServerConfig(app).then(async config => {
.use(Table)
.use(PureDescriptions)
.use(useTable)
+ .use(useEcharts)
.use(VirtualScroller);
app.mount("#app");
});
diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts
index 81c95a3ce..5e391c83a 100644
--- a/src/plugins/echarts/index.ts
+++ b/src/plugins/echarts/index.ts
@@ -1,19 +1,20 @@
+import { App } from "vue";
import * as echarts from "echarts/core";
-
-import { PieChart, BarChart, LineChart } from "echarts/charts";
import { SVGRenderer } from "echarts/renderers";
-
+import { PieChart, BarChart, LineChart } from "echarts/charts";
import {
GridComponent,
TitleComponent,
LegendComponent,
+ GraphicComponent,
ToolboxComponent,
TooltipComponent,
DataZoomComponent,
VisualMapComponent
} from "echarts/components";
-const { use, registerTheme } = echarts;
+const { use } = echarts;
+// const { use, registerTheme } = echarts;
use([
PieChart,
@@ -23,14 +24,26 @@ use([
GridComponent,
TitleComponent,
LegendComponent,
+ GraphicComponent,
ToolboxComponent,
TooltipComponent,
DataZoomComponent,
VisualMapComponent
]);
-// 自定义主题
-import theme from "./theme.json";
-registerTheme("ovilia-green", theme);
+/**
+ * @description 自定义主题
+ * @see {@link https://echarts.apache.org/zh/download-theme.html}
+ */
+// import theme from "./theme.json";
+// registerTheme("ovilia-green", theme);
+
+/**
+ * @description 按需引入echarts
+ * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
+ */
+export function useEcharts(app: App) {
+ app.config.globalProperties.$echarts = echarts;
+}
export default echarts;
diff --git a/src/views/able/print.vue b/src/views/able/print.vue
index a9dd07e0c..c41433db7 100644
--- a/src/views/able/print.vue
+++ b/src/views/able/print.vue
@@ -2,7 +2,7 @@
import Print from "/@/utils/print";
import { reactive, ref } from "vue";
import { VxeTablePropTypes } from "vxe-table";
-import { ReLine } from "../welcome/components";
+import Line from "../welcome/components/Line.vue";
defineOptions({
name: "Print"
@@ -271,7 +271,7 @@ const tableData: User[] = [
}"
>
Echart
-
+
-import { ECharts } from "echarts";
-import echarts from "/@/plugins/echarts";
-import { onBeforeMount, onMounted, nextTick } from "vue";
-import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
+import { ref, type Ref } from "vue";
+import { useECharts } from "@pureadmin/utils";
-let echartInstance: ECharts;
+const barChartRef = ref(null);
+const { setOptions } = useECharts(barChartRef as Ref);
-const props = defineProps({
- index: {
- type: Number,
- default: 0
- }
-});
-
-function initechartInstance() {
- const echartDom = document.querySelector(".bar" + props.index);
- if (!echartDom) return;
- // @ts-ignore
- echartInstance = echarts.init(echartDom);
- echartInstance.clear(); //清除旧画布 重新渲染
-
- echartInstance.setOption({
+setOptions(
+ {
tooltip: {
trigger: "axis",
axisPointer: {
@@ -58,33 +44,16 @@ function initechartInstance() {
data: [3, 204, 1079, 1079]
}
]
- });
-}
-
-onBeforeMount(() => {
- nextTick(() => {
- initechartInstance();
- });
-});
-
-onMounted(() => {
- nextTick(() => {
- useEventListener("resize", () => {
- if (!echartInstance) return;
- useTimeoutFn(() => {
- echartInstance.resize();
- }, 180);
- });
- });
-});
-
-tryOnUnmounted(() => {
- if (!echartInstance) return;
- echartInstance.dispose();
- echartInstance = null;
-});
+ },
+ {
+ name: "click",
+ callback: params => {
+ console.log("click", params);
+ }
+ }
+);
-
+
diff --git a/src/views/welcome/components/Line.vue b/src/views/welcome/components/Line.vue
index 9afe89b12..0e654edd0 100644
--- a/src/views/welcome/components/Line.vue
+++ b/src/views/welcome/components/Line.vue
@@ -1,26 +1,12 @@
-
+
diff --git a/src/views/welcome/components/Pie.vue b/src/views/welcome/components/Pie.vue
index 9c49f6c26..523b37af9 100644
--- a/src/views/welcome/components/Pie.vue
+++ b/src/views/welcome/components/Pie.vue
@@ -1,26 +1,12 @@
-
+
diff --git a/src/views/welcome/components/index.ts b/src/views/welcome/components/index.ts
deleted file mode 100644
index 3a47507dc..000000000
--- a/src/views/welcome/components/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import reInfinite from "./Infinite.vue";
-import reGithub from "./Github.vue";
-import reLine from "./Line.vue";
-import reBar from "./Bar.vue";
-import rePie from "./Pie.vue";
-import { App } from "vue";
-
-const ReInfinite = Object.assign(reInfinite, {
- install(app: App) {
- app.component(reInfinite.name, reInfinite);
- }
-});
-
-const ReGithub = Object.assign(reGithub, {
- install(app: App) {
- app.component(reGithub.name, reGithub);
- }
-});
-
-const ReLine = Object.assign(reLine, {
- install(app: App) {
- app.component(reLine.name, reLine);
- }
-});
-
-const ReBar = Object.assign(reBar, {
- install(app: App) {
- app.component(reBar.name, reBar);
- }
-});
-
-const RePie = Object.assign(rePie, {
- install(app: App) {
- app.component(rePie.name, rePie);
- }
-});
-
-export { ReInfinite, ReGithub, ReLine, ReBar, RePie };
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 50faede4d..3e75600ad 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -1,7 +1,11 @@