main
k_m_x 9 months ago
parent 04c1a405c9
commit bfeec3b685

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

Loading…
Cancel
Save