mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-30 09:24:46 +08:00
feat: add @pureadmin/utils
This commit is contained in:
xiaoxian521
parent
384d5e9598
commit
af04611d6c
@ -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",
|
||||
|
||||
80
pnpm-lock.yaml
generated
80
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
@ -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");
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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[] = [
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Echart</p>
|
||||
<ReLine class="echart" style="margin: 0 auto" />
|
||||
<Line class="echart" style="margin: 0 auto" />
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
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<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>);
|
||||
|
||||
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]
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
nextTick(() => {
|
||||
initechartInstance();
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
useEventListener("resize", () => {
|
||||
if (!echartInstance) return;
|
||||
useTimeoutFn(() => {
|
||||
echartInstance.resize();
|
||||
}, 180);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!echartInstance) return;
|
||||
echartInstance.dispose();
|
||||
echartInstance = null;
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="'bar' + props.index" style="width: 100%; height: 35vh" />
|
||||
<div ref="barChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
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 lineChartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>);
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
function initechartInstance() {
|
||||
const echartDom = document.querySelector(".line" + props.index);
|
||||
if (!echartDom) return;
|
||||
// @ts-ignore
|
||||
echartInstance = echarts.init(echartDom);
|
||||
echartInstance.clear(); //清除旧画布 重新渲染
|
||||
|
||||
echartInstance.setOption({
|
||||
setOptions(
|
||||
{
|
||||
grid: {
|
||||
bottom: "20%",
|
||||
height: "68%",
|
||||
@ -46,33 +32,16 @@ function initechartInstance() {
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
nextTick(() => {
|
||||
initechartInstance();
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
useEventListener("resize", () => {
|
||||
if (!echartInstance) return;
|
||||
useTimeoutFn(() => {
|
||||
echartInstance.resize();
|
||||
}, 180);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!echartInstance) return;
|
||||
echartInstance.dispose();
|
||||
echartInstance = null;
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="'line' + props.index" style="width: 100%; height: 35vh" />
|
||||
<div ref="lineChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
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 pieChartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>);
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
function initechartInstance() {
|
||||
const echartDom = document.querySelector(".pie" + props.index);
|
||||
if (!echartDom) return;
|
||||
// @ts-ignore
|
||||
echartInstance = echarts.init(echartDom);
|
||||
echartInstance.clear(); //清除旧画布 重新渲染
|
||||
|
||||
echartInstance.setOption({
|
||||
setOptions(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
@ -49,33 +35,24 @@ function initechartInstance() {
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("click", params);
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
nextTick(() => {
|
||||
initechartInstance();
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
useEventListener("resize", () => {
|
||||
if (!echartInstance) return;
|
||||
useTimeoutFn(() => {
|
||||
echartInstance.resize();
|
||||
}, 180);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!echartInstance) return;
|
||||
echartInstance.dispose();
|
||||
echartInstance = null;
|
||||
});
|
||||
},
|
||||
// 点击空白处
|
||||
{
|
||||
type: "zrender",
|
||||
name: "click",
|
||||
callback: params => {
|
||||
console.log("点击空白处", params);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="'pie' + props.index" style="width: 100%; height: 35vh" />
|
||||
<div ref="pieChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
|
||||
@ -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 };
|
||||
@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ReGithub, ReInfinite, RePie, ReLine, ReBar } from "./components";
|
||||
import { ref, computed } from "vue";
|
||||
import Bar from "./components/Bar.vue";
|
||||
import Pie from "./components/Pie.vue";
|
||||
import Line from "./components/Line.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import Github from "./components/Github.vue";
|
||||
import Infinite from "./components/Infinite.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
@ -65,7 +69,7 @@ const openDepot = (): void => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<ReGithub />
|
||||
<Github />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -99,7 +103,7 @@ const openDepot = (): void => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<ReInfinite />
|
||||
<Infinite />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -133,7 +137,7 @@ const openDepot = (): void => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<RePie />
|
||||
<Pie />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -167,7 +171,7 @@ const openDepot = (): void => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<ReLine />
|
||||
<Line />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
@ -201,7 +205,7 @@ const openDepot = (): void => {
|
||||
</template>
|
||||
<el-skeleton animated :rows="7" :loading="loading">
|
||||
<template #default>
|
||||
<ReBar />
|
||||
<Bar />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user