Merge branch 'dev' of https://gitee.com/liqianglog/django-vue-admin into dev
ahhui
commit
9d84d5e408
|
|
@ -9,7 +9,7 @@
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="card-content-label">附件统计</div>
|
<div class="card-content-label">附件统计</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-content-value">{{ total || 0 }}</div>
|
<div class="card-content-value">{{ count}}</div>
|
||||||
<div class="el-icon-document-copy">
|
<div class="el-icon-document-copy">
|
||||||
附件数量</div>
|
附件数量</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<el-col :span="12" :offset="6" style="text-align: right">
|
<el-col :span="12" :offset="6" style="text-align: right">
|
||||||
<i class="real-time">实时</i>
|
<i class="real-time">实时</i>
|
||||||
<div class="card-content-time">
|
<div class="card-content-time">
|
||||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
<div class="attachment-value">{{ occupy_space }}MB</div>
|
||||||
<div class="el-icon-s-flag">
|
<div class="el-icon-s-flag">
|
||||||
附件大小</div>
|
附件大小</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,18 +42,20 @@
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
total: 0,
|
count:"",
|
||||||
|
occupy_space:"",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initGet() {
|
initGet () {
|
||||||
request({
|
request({
|
||||||
url: "",
|
url: '/api/system/homepage_statistics/'
|
||||||
}).then((res) => {
|
}).then((res)=>{
|
||||||
const { data } = res;
|
this.count=res.data.sum_file.count;
|
||||||
// this.total = data.total;
|
this.occupy_space=res.data.sum_file.occupy_space;
|
||||||
});
|
;
|
||||||
},
|
})
|
||||||
|
},
|
||||||
// 生成一个随机整数
|
// 生成一个随机整数
|
||||||
randomColor() {
|
randomColor() {
|
||||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="card-content-label">数据库统计</div>
|
<div class="card-content-label">数据库统计</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-content-value">{{ total || 0 }}</div>
|
<div class="card-content-value">{{count }}</div>
|
||||||
<div class="el-icon-coin">
|
<div class="el-icon-coin">
|
||||||
数据库数量</div>
|
数据库数量</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<el-col :span="12" :offset="6" style="text-align: right">
|
<el-col :span="12" :offset="6" style="text-align: right">
|
||||||
<i class="real-time">实时</i>
|
<i class="real-time">实时</i>
|
||||||
<div class="card-content-time">
|
<div class="card-content-time">
|
||||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
<div class="attachment-value">{{ occupy_space}}MB</div>
|
||||||
<div class="el-icon-s-flag">
|
<div class="el-icon-s-flag">
|
||||||
占用空间</div>
|
占用空间</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,18 +41,19 @@
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
total: 0,
|
count:"",
|
||||||
|
occupy_space:"",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initGet() {
|
initGet () {
|
||||||
request({
|
request({
|
||||||
url: "",
|
url: '/api/system/homepage_statistics/'
|
||||||
}).then((res) => {
|
}).then((res)=>{
|
||||||
const { data } = res;
|
this.count=res.data.sum_file.count;
|
||||||
// this.total = data.total;
|
this.occupy_space=res.data.sum_file.occupy_space;
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
// 生成一个随机整数
|
// 生成一个随机整数
|
||||||
randomColor() {
|
randomColor() {
|
||||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-content-label">用户总数</div>
|
<div class="card-content-label">用户总数</div>
|
||||||
<div class="card-content-value">{{total || 0}}</div>
|
<div class="card-content-value">{{sum_register}}</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6" :offset="6" style="text-align: right;">
|
<el-col :span="6" :offset="6" style="text-align: right;">
|
||||||
|
|
@ -31,18 +31,17 @@
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
total: 0
|
sum_register:"",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initGet () {
|
initGet () {
|
||||||
request({
|
request({
|
||||||
url: ''
|
url: '/api/system/homepage_statistics/'
|
||||||
}).then(res => {
|
}).then((res)=>{
|
||||||
const { data } = res
|
this.sum_register=res.data.sum_register
|
||||||
// this.total = data.total
|
})
|
||||||
})
|
},
|
||||||
},
|
|
||||||
// 生成一个随机整数
|
// 生成一个随机整数
|
||||||
randomColor () {
|
randomColor () {
|
||||||
const color = [
|
const color = [
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 0}}</h3>
|
<div class="enroll-number"><h3>{{ newName }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">今日注册
|
<div class="enroll-text">今日注册
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 1}}</h3>
|
<div class="enroll-number"><h3>{{today_login}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">今日登录
|
<div class="enroll-text">今日登录
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 7}}</h3>
|
<div class="enroll-number"><h3>{{Three_days_register}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">三日新增
|
<div class="enroll-text">三日新增
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 15}}</h3>
|
<div class="enroll-number"><h3>{{Seven_days_register}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">七日新增
|
<div class="enroll-text">七日新增
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 24}}</h3>
|
<div class="enroll-number"><h3>{{Seven_days_login}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">七日活跃
|
<div class="enroll-text">七日活跃
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="20" class="orange-box">
|
<el-col :span="20" class="orange-box">
|
||||||
<div class="enroll-time">
|
<div class="enroll-time">
|
||||||
<div class="enroll-number"><h3>{{total || 89}}</h3>
|
<div class="enroll-number"><h3>{{month_login}}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="enroll-text">月活跃
|
<div class="enroll-text">月活跃
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,6 +96,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { request } from '@/api/service'
|
||||||
|
import log from '../init'
|
||||||
export default {
|
export default {
|
||||||
title: '用户新增活跃图',
|
title: '用户新增活跃图',
|
||||||
icon: 'el-icon-user-solid',
|
icon: 'el-icon-user-solid',
|
||||||
|
|
@ -107,19 +109,29 @@
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
total: 0
|
newName:"",
|
||||||
|
today_login:"",
|
||||||
|
Three_days_register:"",
|
||||||
|
Seven_days_register:"",
|
||||||
|
Seven_days_login:"",
|
||||||
|
month_login:"",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.initGet()
|
this.initGet()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initGet () {
|
initGet () {
|
||||||
request({
|
request({
|
||||||
url: ''
|
url: '/api/system/homepage_statistics/'
|
||||||
}).then(res => {
|
}).then((res)=>{
|
||||||
const { data } = res
|
this.newName=res.data.today_register;
|
||||||
// this.total = data.total
|
this. today_login=res.data.today_login;
|
||||||
|
this. Three_days_register=res.data.Three_days_register;
|
||||||
|
this. Seven_days_register=res.data.Seven_days_register;
|
||||||
|
this. Seven_days_login=res.data.Seven_days_login;
|
||||||
|
this. month_login=res.data.month_login;
|
||||||
|
;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 生成一个随机整数
|
// 生成一个随机整数
|
||||||
|
|
|
||||||
|
|
@ -1,92 +1,99 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card
|
<el-card
|
||||||
class="card-view"
|
class="card-view"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundColor: randomColor(),
|
backgroundColor: randomColor(),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div id="main" style="width: 530px; height: 300px; left: -18px"></div>
|
<div id="main" style="width: 530px; height: 300px; left: -18px"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request } from "@/api/service";
|
import { request } from "@/api/service";
|
||||||
export default {
|
export default {
|
||||||
title: "注册用户数折线图",
|
title: "注册用户数折线图",
|
||||||
icon: "el-icon-s-data",
|
icon: "el-icon-s-data",
|
||||||
description: "用户注册",
|
description: "用户注册",
|
||||||
name: "registeredUser",
|
name: "registeredUser",
|
||||||
height: 28,
|
height: 28,
|
||||||
width: 10,
|
width: 10,
|
||||||
minH: 10,
|
minH: 10,
|
||||||
minW: 4,
|
minW: 4,
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
name: "eCharts",
|
name: "eCharts",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
this.myChart = null;
|
||||||
|
return {
|
||||||
|
time: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initGet() {
|
||||||
|
request({
|
||||||
|
url: "/api/system/homepage_statistics/",
|
||||||
|
}).then((res) => {
|
||||||
|
this.time = res.data.sum_days_register_list;
|
||||||
|
this.drawLine(this.time);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
// 生成一个随机整数
|
||||||
initGet() {
|
randomColor() {
|
||||||
request({
|
const color = ["#fffff"];
|
||||||
url: "",
|
const ran = Math.floor(Math.random() * 4);
|
||||||
});
|
return color[ran];
|
||||||
},
|
},
|
||||||
// 生成一个随机整数
|
drawLine() {
|
||||||
randomColor() {
|
// 基于准备好的dom，初始化echarts实例
|
||||||
const color = ["#fffff"];
|
// 绘制图表
|
||||||
const ran = Math.floor(Math.random() * 4);
|
this.myChart.setOption({
|
||||||
return color[ran];
|
title: { text: "" },
|
||||||
},
|
tooltip: {},
|
||||||
drawLine() {
|
xAxis: {
|
||||||
// 基于准备好的dom，初始化echarts实例
|
data: this.time.map((item) => item.time),
|
||||||
let myChart = this.$echarts.init(document.getElementById("main"));
|
boundaryGap: false,
|
||||||
// 绘制图表
|
axisLabel: {
|
||||||
myChart.setOption({
|
interval: 0, //强制显示所有刻度
|
||||||
title: { text: "" },
|
rotate: 6,
|
||||||
tooltip: {},
|
},
|
||||||
xAxis: {
|
},
|
||||||
data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
|
yAxis: {},
|
||||||
boundaryGap: false,
|
legend: {
|
||||||
axisLabel: {
|
data: ["注册用户数"],
|
||||||
interval: 0, //强制显示所有刻度
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "注册用户数",
|
||||||
|
type: "line",
|
||||||
|
data: this.time.map((item) => item.count),
|
||||||
|
//折线图的背景色
|
||||||
|
areaStyle: {
|
||||||
|
color: "rgb(98,206,178)",
|
||||||
|
},
|
||||||
|
//折线的颜色
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgb(38,204,164)", // 设置折线图为红色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {},
|
],
|
||||||
legend: {
|
});
|
||||||
data: ["注册用户数"],
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "注册用户数",
|
|
||||||
type: "line",
|
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
|
||||||
//折线图的背景色
|
|
||||||
areaStyle: {
|
|
||||||
color: "rgb(98,206,178)",
|
|
||||||
},
|
|
||||||
//折线的颜色
|
|
||||||
itemStyle: {
|
|
||||||
color: "rgb(38,204,164)", // 设置折线图为红色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
},
|
||||||
this.initGet();
|
mounted() {
|
||||||
this.drawLine();
|
this.myChart = this.$echarts.init(document.getElementById("main"));
|
||||||
},
|
this.initGet();
|
||||||
};
|
this.drawLine();
|
||||||
</script>
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.card-view {
|
.card-view {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.el-card{
|
.el-card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="card-content-label">附件总数</div>
|
<div class="card-content-label">附件总数</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-content-value">{{ total || 0 }}</div>
|
<div class="card-content-value">{{ count }}</div>
|
||||||
<div class="el-icon-document-copy">
|
<div class="el-icon-document-copy">
|
||||||
附件总数量</div>
|
附件总数量</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<el-col :span="12" :offset="6" style="text-align: right">
|
<el-col :span="12" :offset="6" style="text-align: right">
|
||||||
<i class="real-time">实时</i>
|
<i class="real-time">实时</i>
|
||||||
<div class="card-content-time">
|
<div class="card-content-time">
|
||||||
<div class="attachment-value">{{ total || 0 }}MB</div>
|
<div class="attachment-value">{{ occupy_space}}MB</div>
|
||||||
<div class="el-icon-s-flag">
|
<div class="el-icon-s-flag">
|
||||||
占用空间</div>
|
占用空间</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,18 +42,20 @@
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
total: 0,
|
count:"",
|
||||||
|
occupy_space:"",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initGet() {
|
initGet () {
|
||||||
request({
|
request({
|
||||||
url: "",
|
url: '/api/system/homepage_statistics/'
|
||||||
}).then((res) => {
|
}).then((res)=>{
|
||||||
const { data } = res;
|
this.count=res.data.today_file.count;
|
||||||
// this.total = data.total;
|
this.occupy_space=res.data.today_file.occupy_space;
|
||||||
});
|
;
|
||||||
},
|
})
|
||||||
|
},
|
||||||
// 生成一个随机整数
|
// 生成一个随机整数
|
||||||
randomColor() {
|
randomColor() {
|
||||||
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
|
||||||
|
|
@ -95,7 +97,7 @@
|
||||||
}
|
}
|
||||||
.el-icon-s-flag {
|
.el-icon-s-flag {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-right: 132px;
|
margin-right: 130px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.real-time {
|
.real-time {
|
||||||
|
|
|
||||||
|
|
@ -1,98 +1,106 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card
|
<el-card
|
||||||
class="card-view"
|
class="card-view"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundColor: randomColor(),
|
backgroundColor: randomColor(),
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<!-- shadow="always" -->
|
<!-- shadow="always" -->
|
||||||
<div id="myChart" style="width: 530px; height: 300px; left: -18px"></div>
|
<div id="myChart" style="width: 530px; height: 300px; left: -15px"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request } from "@/api/service";
|
import { request } from "@/api/service";
|
||||||
export default {
|
export default {
|
||||||
title: "用户登录折线图",
|
title: "用户登录折线图",
|
||||||
icon: "el-icon-s-data",
|
icon: "el-icon-s-data",
|
||||||
description: "用户登陆",
|
description: "用户登陆",
|
||||||
name: "userIogin",
|
name: "user",
|
||||||
height: 28,
|
height: 28,
|
||||||
width: 10,
|
width: 10,
|
||||||
minH: 10,
|
minH: 10,
|
||||||
minW: 4,
|
minW: 4,
|
||||||
isResizable: true,
|
isResizable: true,
|
||||||
name: "eCharts",
|
name: "eCharts",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
this.myChart=null
|
||||||
|
return {
|
||||||
|
time:[]
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initGet () {
|
||||||
|
request({
|
||||||
|
url: '/api/system/homepage_statistics/'
|
||||||
|
}).then((res)=>{
|
||||||
|
this.time=res.data.sum_days_login_list
|
||||||
|
this.drawLine(this.time)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 生成一个随机整数
|
||||||
|
randomColor() {
|
||||||
|
const color = ["#fffff"];
|
||||||
|
const ran = Math.floor(Math.random() * 4);
|
||||||
|
return color[ran];
|
||||||
},
|
},
|
||||||
methods: {
|
drawLine() {
|
||||||
initGet() {
|
// 基于准备好的dom，初始化echarts实例
|
||||||
request({
|
// 绘制图表
|
||||||
url: "",
|
this. myChart.setOption({
|
||||||
});
|
title: { text: "" },
|
||||||
},
|
tooltip: {},
|
||||||
// 生成一个随机整数
|
xAxis: {
|
||||||
randomColor() {
|
data: this.time.map(item=>item.time),
|
||||||
const color = ["#fffff"];
|
boundaryGap: false,
|
||||||
const ran = Math.floor(Math.random() * 4);
|
axisLabel: {
|
||||||
return color[ran];
|
interval: 0, //强制显示所有刻度
|
||||||
},
|
rotate: 6,
|
||||||
drawLine() {
|
},
|
||||||
// 基于准备好的dom，初始化echarts实例
|
},
|
||||||
let myChart = this.$echarts.init(document.getElementById("myChart"));
|
yAxis: {},
|
||||||
// 绘制图表
|
legend: {
|
||||||
myChart.setOption({
|
data: ["用户登陆数"],
|
||||||
title: { text: "" },
|
},
|
||||||
tooltip: {},
|
series: [
|
||||||
xAxis: {
|
{
|
||||||
data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
|
name: "用户登陆数",
|
||||||
boundaryGap: false,
|
type: "line",
|
||||||
axisLabel: {
|
data: this.time.map(item=>item.count),
|
||||||
interval: 0, //强制显示所有刻度
|
areaStyle: {},
|
||||||
|
areaStyle: {
|
||||||
|
//折线的颜色
|
||||||
|
color: "rgb(116,135,206)",
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgb(67,89,185)", // 设置折线图为红色
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {},
|
],
|
||||||
legend: {
|
});
|
||||||
data: ["用户登陆数"],
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "用户登陆数",
|
|
||||||
type: "line",
|
|
||||||
data: [5, 20, 36, 10, 10, 20],
|
|
||||||
areaStyle: {},
|
|
||||||
areaStyle: {
|
|
||||||
//折线的颜色
|
|
||||||
color: "rgb(116,135,206)",
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: "rgb(67,89,185)", // 设置折线图为红色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
},
|
||||||
this.initGet();
|
mounted() {
|
||||||
this.drawLine();
|
this. myChart =this.$echarts.init(document.getElementById("myChart"));
|
||||||
},
|
this.initGet();
|
||||||
};
|
this.drawLine();
|
||||||
</script>
|
},
|
||||||
|
};
|
||||||
<style scoped lang="scss">
|
</script>
|
||||||
.card-view {
|
|
||||||
border-radius: 10px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.el-card{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
::v-deep .el-card__body {
|
|
||||||
width: 470px;
|
|
||||||
height: 300px;
|
|
||||||
|
|
||||||
}
|
<style scoped lang="scss">
|
||||||
</style>
|
.card-view {
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-card{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
width: 470px;
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue