twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add @pureadmin/utils

Browse Source
This commit is contained in:
xiaoxian521
2022-06-28 11:45:32 +08:00
parent 384d5e9598
commit af04611d6c
10 changed files with 143 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/able/print.vue
View File

@@ -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

61
src/views/welcome/components/Bar.vue
View File

@@ -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]
}
]
});
}
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);
}
}
);
</script>
<template>
<div :class="'bar' + props.index" style="width: 100%; height: 35vh" />
<div ref="barChartRef" style="width: 100%; height: 35vh" />
</template>

61
src/views/welcome/components/Line.vue
View File

@@ -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: {}
}
]
});
}
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);
}
}
);
</script>
<template>
<div :class="'line' + props.index" style="width: 100%; height: 35vh" />
<div ref="lineChartRef" style="width: 100%; height: 35vh" />
</template>

69
src/views/welcome/components/Pie.vue
View File

@@ -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() {
}
}
]
});
}
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);
}
},
// 点击空白处
{
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>

38
src/views/welcome/components/index.ts
View File

@@ -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 };

16
src/views/welcome/index.vue
View File

@@ -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>