|
|
|
@ -1,20 +1,19 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-card style="margin: 20px 0; font-size: 18px">
|
|
|
|
|
<div style="margin-bottom: 10px">
|
|
|
|
|
B站关注:程序员青戈,手把手带你做毕设!
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin: 10px">
|
|
|
|
|
毕设、课设项目定制加up微信:xia_qing2012。代码纯手撸,安全靠谱!
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<div style="margin: 20px 0">
|
|
|
|
|
<el-select class="input" v-model="timeRange" placeholder="请选择" @change="load"> <!-- 从后台加载最新的数据 -->
|
|
|
|
|
<el-select
|
|
|
|
|
class="input"
|
|
|
|
|
v-model="timeRange"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="load"
|
|
|
|
|
>
|
|
|
|
|
<!-- 从后台加载最新的数据 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
@ -25,89 +24,90 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Cookies from 'js-cookie'
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
import request from "@/utils/request";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
|
|
const option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '图书借还统计'
|
|
|
|
|
text: "图书借还统计",
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['借书数量', '还书数量']
|
|
|
|
|
data: ["借书数量", "还书数量"],
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
left: "3%",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "3%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
saveAsImage: {}
|
|
|
|
|
}
|
|
|
|
|
saveAsImage: {},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
type: "category",
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: [] // 从后台动态获取
|
|
|
|
|
data: [], // 从后台动态获取
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
type: "value",
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '借书数量',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total',
|
|
|
|
|
name: "借书数量",
|
|
|
|
|
type: "line",
|
|
|
|
|
stack: "Total",
|
|
|
|
|
smooth: true,
|
|
|
|
|
data: [] // 从后台动态获取
|
|
|
|
|
data: [], // 从后台动态获取
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '还书数量',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total',
|
|
|
|
|
name: "还书数量",
|
|
|
|
|
type: "line",
|
|
|
|
|
stack: "Total",
|
|
|
|
|
smooth: true,
|
|
|
|
|
data: [] // 从后台动态获取
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
data: [], // 从后台动态获取
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
|
|
|
|
|
lineBox: null,
|
|
|
|
|
timeRange: 'week',
|
|
|
|
|
options: [
|
|
|
|
|
{label: '最近一周', value: 'week'},
|
|
|
|
|
{label: '最近一个月', value: 'month'},
|
|
|
|
|
{label: '最近两个月', value: 'month2'},
|
|
|
|
|
{label: '最近三个月', value: 'month3'},
|
|
|
|
|
]
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
admin: Cookies.get("admin") ? JSON.parse(Cookies.get("admin")) : {},
|
|
|
|
|
lineBox: null,
|
|
|
|
|
timeRange: "week",
|
|
|
|
|
options: [
|
|
|
|
|
{ label: "最近一周", value: "week" },
|
|
|
|
|
{ label: "最近一个月", value: "month" },
|
|
|
|
|
{ label: "最近两个月", value: "month2" },
|
|
|
|
|
{ label: "最近三个月", value: "month3" },
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 等页面元素全部初始化好
|
|
|
|
|
this.load();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
load() {
|
|
|
|
|
if (!this.lineBox) {
|
|
|
|
|
this.lineBox = echarts.init(document.getElementById("line")); // 初始化echarts容器
|
|
|
|
|
}
|
|
|
|
|
// 从后台获取数据
|
|
|
|
|
request.get("/borrow/lineCharts/" + this.timeRange).then((res) => {
|
|
|
|
|
option.xAxis.data = res.data.date;
|
|
|
|
|
option.series[0].data = res.data.borrow;
|
|
|
|
|
option.series[1].data = res.data.retur;
|
|
|
|
|
this.lineBox.setOption(option); // 设置容器的属性值,当你的数据发生变化的时候,一定要重新setOption
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mounted() { // 等页面元素全部初始化好
|
|
|
|
|
this.load()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
load() {
|
|
|
|
|
if (!this.lineBox) {
|
|
|
|
|
this.lineBox = echarts.init(document.getElementById('line')) // 初始化echarts容器
|
|
|
|
|
}
|
|
|
|
|
// 从后台获取数据
|
|
|
|
|
request.get('/borrow/lineCharts/' + this.timeRange).then(res => {
|
|
|
|
|
option.xAxis.data = res.data.date
|
|
|
|
|
option.series[0].data = res.data.borrow
|
|
|
|
|
option.series[1].data = res.data.retur
|
|
|
|
|
this.lineBox.setOption(option) // 设置容器的属性值,当你的数据发生变化的时候,一定要重新setOption
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|