mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-09 13:53:38 +08:00
refactor: optimization home page
This commit is contained in:
xiaoxian521
36
src/components/ReCharts/index.ts
Normal file
36
src/components/ReCharts/index.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { App } from "vue";
|
||||
import reBar from "./src/Bar.vue";
|
||||
import reGithub from "./src/Github.vue";
|
||||
import reInfinite from "./src/Infinite.vue";
|
||||
import reLine from "./src/Line.vue";
|
||||
import rePie from "./src/Pie.vue";
|
||||
|
||||
export const ReBar = Object.assign(reBar, {
|
||||
install(app: App) {
|
||||
app.component(reBar.name, reBar);
|
||||
}
|
||||
});
|
||||
|
||||
export const ReGithub = Object.assign(reGithub, {
|
||||
install(app: App) {
|
||||
app.component(reGithub.name, reGithub);
|
||||
}
|
||||
});
|
||||
|
||||
export const ReInfinite = Object.assign(reInfinite, {
|
||||
install(app: App) {
|
||||
app.component(reInfinite.name, reInfinite);
|
||||
}
|
||||
});
|
||||
|
||||
export const ReLine = Object.assign(reLine, {
|
||||
install(app: App) {
|
||||
app.component(reLine.name, reLine);
|
||||
}
|
||||
});
|
||||
|
||||
export const RePie = Object.assign(rePie, {
|
||||
install(app: App) {
|
||||
app.component(rePie.name, rePie);
|
||||
}
|
||||
});
|
||||
96
src/components/ReCharts/src/Bar.vue
Normal file
96
src/components/ReCharts/src/Bar.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Bar"
|
||||
};
|
||||
</script>
|
||||
|
||||
<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";
|
||||
|
||||
let echartInstance: ECharts;
|
||||
|
||||
function initechartInstance() {
|
||||
const echartDom = document.querySelector(".bar");
|
||||
if (!echartDom) return;
|
||||
// @ts-ignore
|
||||
echartInstance = echarts.init(echartDom);
|
||||
echartInstance.clear(); //清除旧画布 重新渲染
|
||||
|
||||
echartInstance.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: "20%",
|
||||
height: "68%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
// width: "70",
|
||||
// overflow: "truncate"
|
||||
},
|
||||
data: ["open_issues", "forks", "watchers", "star"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value"
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "GitHub信息",
|
||||
type: "bar",
|
||||
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;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bar"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bar {
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
}
|
||||
</style>
|
||||
93
src/components/ReCharts/src/Github.vue
Normal file
93
src/components/ReCharts/src/Github.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
direction="vertical"
|
||||
:column="3"
|
||||
size="medium"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-user"></i>
|
||||
用户名
|
||||
</template>
|
||||
xiaoxian
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
手机号
|
||||
</template>
|
||||
123456789
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-location-outline"></i>
|
||||
居住地
|
||||
</template>
|
||||
上海
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
direction="vertical"
|
||||
:column="2"
|
||||
size="medium"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-tickets"></i>
|
||||
标签
|
||||
</template>
|
||||
<el-tag
|
||||
v-for="item in lists"
|
||||
:key="item.label"
|
||||
:type="item.type"
|
||||
size="mini"
|
||||
effect="dark"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-office-building"></i>
|
||||
联系地址
|
||||
</template>
|
||||
上海市徐汇区
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
direction="vertical"
|
||||
:column="1"
|
||||
size="medium"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<i class="el-icon-notebook-1"></i>
|
||||
留言
|
||||
</template>
|
||||
好好学习，天天向上
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const lists = ref<ForDataType<undefined>>([
|
||||
{ type: "", label: "善良" },
|
||||
{ type: "success", label: "好学" },
|
||||
{ type: "info", label: "幽默" },
|
||||
{ type: "danger", label: "旅游" },
|
||||
{ type: "warning", label: "追剧" }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-tag--mini {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
</style>
|
||||
134
src/components/ReCharts/src/Infinite.vue
Normal file
134
src/components/ReCharts/src/Infinite.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import SeamlessScroll from "/@/components/ReSeamlessScroll";
|
||||
|
||||
const scroll = templateRef<ElRef | null>("scroll", null);
|
||||
|
||||
let listData = ref<ForDataType<undefined>>([
|
||||
{
|
||||
date: "2021-09-01",
|
||||
name: "vue-pure-admin",
|
||||
star: "1000"
|
||||
},
|
||||
{
|
||||
date: "2021-09-02",
|
||||
name: "vue-pure-admin",
|
||||
star: "1100"
|
||||
},
|
||||
{
|
||||
date: "2021-09-03",
|
||||
name: "vue-pure-admin",
|
||||
star: "1200"
|
||||
},
|
||||
{
|
||||
date: "2021-09-04",
|
||||
name: "vue-pure-admin",
|
||||
star: "1300"
|
||||
},
|
||||
{
|
||||
date: "2021-09-05",
|
||||
name: "vue-pure-admin",
|
||||
star: "1400"
|
||||
},
|
||||
{
|
||||
date: "2021-09-06",
|
||||
name: "vue-pure-admin",
|
||||
star: "1500"
|
||||
},
|
||||
{
|
||||
date: "2021-09-07",
|
||||
name: "vue-pure-admin",
|
||||
star: "1600"
|
||||
},
|
||||
{
|
||||
date: "2021-09-08",
|
||||
name: "vue-pure-admin",
|
||||
star: "1700"
|
||||
},
|
||||
{
|
||||
date: "2021-09-09",
|
||||
name: "vue-pure-admin",
|
||||
star: "1800"
|
||||
},
|
||||
{
|
||||
date: "2021-09-10",
|
||||
name: "vue-pure-admin",
|
||||
star: "1900"
|
||||
}
|
||||
]);
|
||||
|
||||
let classOption = reactive({
|
||||
direction: "top"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="infinite">
|
||||
<ul class="top">
|
||||
<li>更新日期</li>
|
||||
<li>项目名称</li>
|
||||
<li>Star数量</li>
|
||||
</ul>
|
||||
<SeamlessScroll
|
||||
ref="scroll"
|
||||
:data="listData"
|
||||
:class-option="classOption"
|
||||
class="warp"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in listData" :key="index">
|
||||
<span v-text="item.date"></span>
|
||||
<span v-text="item.name"></span>
|
||||
<span v-text="item.star"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</SeamlessScroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.infinite {
|
||||
.top {
|
||||
width: 95%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
font-weight: 400;
|
||||
background: #fafafa;
|
||||
|
||||
li {
|
||||
width: 34%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
width: 95%;
|
||||
height: 230px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 34%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/components/ReCharts/src/Line.vue
Normal file
84
src/components/ReCharts/src/Line.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Line"
|
||||
};
|
||||
</script>
|
||||
|
||||
<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";
|
||||
|
||||
let echartInstance: ECharts;
|
||||
|
||||
function initechartInstance() {
|
||||
const echartDom = document.querySelector(".line");
|
||||
if (!echartDom) return;
|
||||
// @ts-ignore
|
||||
echartInstance = echarts.init(echartDom);
|
||||
echartInstance.clear(); //清除旧画布 重新渲染
|
||||
|
||||
echartInstance.setOption({
|
||||
grid: {
|
||||
bottom: "20%",
|
||||
height: "68%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: ["open_issues", "forks", "watchers", "star"]
|
||||
},
|
||||
yAxis: {
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [3, 204, 1079, 1079],
|
||||
type: "line",
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
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"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
}
|
||||
</style>
|
||||
87
src/components/ReCharts/src/Pie.vue
Normal file
87
src/components/ReCharts/src/Pie.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "Pie"
|
||||
};
|
||||
</script>
|
||||
|
||||
<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";
|
||||
|
||||
let echartInstance: ECharts;
|
||||
|
||||
function initechartInstance() {
|
||||
const echartDom = document.querySelector(".pie");
|
||||
if (!echartDom) return;
|
||||
// @ts-ignore
|
||||
echartInstance = echarts.init(echartDom);
|
||||
echartInstance.clear(); //清除旧画布 重新渲染
|
||||
|
||||
echartInstance.setOption({
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
right: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Github信息",
|
||||
type: "pie",
|
||||
radius: "60%",
|
||||
center: ["40%", "50%"],
|
||||
data: [
|
||||
{ value: 1079, name: "watchers" },
|
||||
{ value: 1079, name: "star" },
|
||||
{ value: 204, name: "forks" },
|
||||
{ value: 3, name: "open_issues" }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
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="pie"></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pie {
|
||||
width: 100%;
|
||||
height: 35vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user