335 lines
7.3 KiB
Vue
335 lines
7.3 KiB
Vue
<route>
|
|
{
|
|
meta: {
|
|
ignoreRouterCheck: true,
|
|
}
|
|
}
|
|
</route>
|
|
<style lang="less" scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.total {
|
|
width: 95%;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
// 顶部标题
|
|
.top_title_box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
margin-left: 1.5rem;
|
|
}
|
|
|
|
.point {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-right: 1rem;
|
|
background-color: #a30000;
|
|
z-index: 2;
|
|
}
|
|
|
|
.top_title {
|
|
font-size: 25px;
|
|
// font-weight: bold;
|
|
}
|
|
|
|
// 顶部盒子
|
|
.top_box_pos {
|
|
width: 350px;
|
|
height: 250px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 30px 10px #f8f8fd;
|
|
border-radius: 10px;
|
|
margin-top: 0.3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.top_content_box {
|
|
width: 100%;
|
|
height: 40%;
|
|
// background-color: green;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
#main3 {
|
|
width: 1850px;
|
|
height: 100%;
|
|
margin-top: 30px;
|
|
margin-left: -7%;
|
|
}
|
|
|
|
// 柱状图
|
|
.Wave_pattern {
|
|
width: 95%;
|
|
height: 450px;
|
|
margin: 0rem auto;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border: 2px solid #f3f3f3;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.Wave_pattern>P {
|
|
float: left;
|
|
margin-top: 40px;
|
|
font-family: 幼圆;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<!-- 顶部的所有盒子 -->
|
|
<div class="top_title_box">
|
|
<span class="point"></span>
|
|
<p class="top_title">数据预览</p>
|
|
</div>
|
|
|
|
<div class="total">
|
|
<div class="top_content_box">
|
|
|
|
<CountBox :data="teacherEchartsData" :idx="1" :text="'教师总数'" :img="'/img/home/分组 1 (10).png'"
|
|
:count="teacherData.count" :percentage="teacherData.percentage">
|
|
</CountBox>
|
|
|
|
<CountBox :data="infoArticleEchartsData" :idx="2" :text="'文章总数'" :img="'/img/home/分组 1 (11).png'"
|
|
:count="infoArticleData.count" :percentage="infoArticleData.percentage">
|
|
</CountBox>
|
|
|
|
<CountBox :data="flowEchartsData" :idx="3" :text="'访客总数'" :img="'/img/home/分组 1 (12).png'" :count="flowData.count"
|
|
:percentage="flowData.percentage">
|
|
</CountBox>
|
|
|
|
<CountBox :data="worksEchartsData" :idx="4" :text="'作品总数'" :img="'/img/home/分组 1 (13).png'" :count="worksData.count"
|
|
:percentage="worksData.percentage">
|
|
</CountBox>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="top_title_box" style="margin-top: 50px;">
|
|
<!-- main3是柱状图 -->
|
|
<span class="point"></span>
|
|
<p class="top_title">报名统计</p>
|
|
</div>
|
|
<div class="Wave_pattern">
|
|
|
|
<!-- <div class="middle_show_box">
|
|
|
|
<div class="middle_pos_box">
|
|
<div class="middle_title_box">
|
|
<span class="point"></span>
|
|
<p class="top_title">预约课程统计</p>
|
|
</div>
|
|
|
|
<div class="year_select_box">
|
|
<div class="year_text">2021</div>
|
|
<div class="year_text">2022</div>
|
|
<div class="year_text year_text_actice">2023</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
<div id="main3"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import CountBox from "~/components/Echarts/CountBox.vue"
|
|
import { getHomeData } from '~/service/home';
|
|
|
|
// Echarts数据
|
|
let teacherEchartsData = [
|
|
['1', 500],
|
|
['2', 900],
|
|
['3', 460],
|
|
['4', 1150],
|
|
['5', 300],
|
|
['6', 1000],
|
|
['7', 400],
|
|
]
|
|
|
|
let infoArticleEchartsData = [
|
|
['1', 500],
|
|
['2', 900],
|
|
['3', 460],
|
|
['4', 1150],
|
|
['5', 300],
|
|
['6', 1000],
|
|
['7', 400],
|
|
]
|
|
|
|
let flowEchartsData = [
|
|
['1', 500],
|
|
['2', 900],
|
|
['3', 460],
|
|
['4', 1150],
|
|
['5', 300],
|
|
['6', 1000],
|
|
['7', 400],
|
|
]
|
|
|
|
let worksEchartsData = [
|
|
['1', 500],
|
|
['2', 900],
|
|
['3', 460],
|
|
['4', 1150],
|
|
['5', 300],
|
|
['6', 1000],
|
|
['7', 400],
|
|
]
|
|
|
|
let teacherData = ref({})
|
|
let infoArticleData = ref({})
|
|
let flowData = ref({})
|
|
let worksData = ref({})
|
|
let enrolData = ref({})
|
|
|
|
onMounted(async () => {
|
|
await getHome()
|
|
await echartsInit3()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
echarts.dispose(document.getElementById('main3'));
|
|
});
|
|
|
|
|
|
// 获取接口数据
|
|
async function getHome() {
|
|
const { code, data } = await getHomeData();
|
|
if (code == 0) {
|
|
teacherData.value = data.data_preview.teacher
|
|
infoArticleData.value = data.data_preview.info_article
|
|
flowData.value = data.data_preview.flow
|
|
worksData.value = data.data_preview.works
|
|
|
|
enrolData.value = data.statistics
|
|
console.log(data, "首页");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 柱形图
|
|
async function echartsInit3() {
|
|
var chartDom = document.getElementById('main3');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
right: 200,
|
|
itemWidth: 20, // 设置图标宽度为10px
|
|
itemHeight: 20, // 设置图标宽度为10px
|
|
textStyle: { // 设置字体样式
|
|
color: '#a0a5b2',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
padding: [0, 5, 0, 8] // 设置字体和图标之间的间距
|
|
},
|
|
data: ['报名人数', '留言人数']
|
|
},
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
axisTick: {
|
|
show: false // 不显示坐标轴刻度线
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#eaeff7' // 坐标轴轴线的颜色
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#a4bade', // 坐标轴标签的颜色
|
|
fontSize: 15, // 坐标轴标签的字体大小
|
|
fontWeight: "bold", // 坐标轴标签的字体大小
|
|
lineHeight: 40 // 坐标轴标签的行高，即字体间距
|
|
}
|
|
},
|
|
type: 'category',
|
|
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '人数', // 设置 y 轴名称为 "人数"
|
|
nameGap: 35, // 设置名称和轴线之间的距离为 10 像素
|
|
nameTextStyle: {
|
|
color: '#a4bade',
|
|
fontSize: 15,
|
|
padding: [0, 0, 0, -73], // 设置名称文字与轴线之间的间距为 [0, 0, 10, 0]
|
|
fontWeight: "bold", // 坐标轴标签的字体大小
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#eaeff7' // 设置网格线的颜色为 #eaeff7
|
|
}
|
|
},
|
|
axisLabel: {
|
|
padding: [0, 15, 0, 0],
|
|
textStyle: {
|
|
color: '#a4bade', // 坐标轴标签的颜色
|
|
fontSize: 15, // 坐标轴标签的字体大小
|
|
fontWeight: "bold", // 坐标轴标签的字体大小
|
|
}
|
|
},
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '报名人数',
|
|
type: 'bar',
|
|
barWidth: 25,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#4365dc",
|
|
barBorderRadius: 3,
|
|
},
|
|
},
|
|
// data: [
|
|
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
// ],
|
|
data: enrolData.value.signup
|
|
},
|
|
{
|
|
name: '留言人数',
|
|
type: 'bar',
|
|
barWidth: 25,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#74be8c",
|
|
barBorderRadius: 3,
|
|
},
|
|
},
|
|
data: enrolData.value.leave_message
|
|
}
|
|
]
|
|
}
|
|
option && myChart.setOption(option);
|
|
};
|
|
|
|
|
|
</script> |