213 lines
4.6 KiB
Vue
213 lines
4.6 KiB
Vue
<template>
|
||
<el-card
|
||
class="card-view"
|
||
:style="{
|
||
backgroundColor: randomColor(),
|
||
}"
|
||
>
|
||
<!-- shadow="always" -->
|
||
<div id="myChart" :style="{width: pxData.wpx+'px',height: pxData.hpx+'px'}"></div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { request } from '@/api/service'
|
||
export default {
|
||
sort: 6,
|
||
title: '用户登录趋势',
|
||
name: 'userLogin',
|
||
icon: 'el-icon-s-data',
|
||
description: '用户登陆',
|
||
height: 28,
|
||
width: 20,
|
||
isResizable: true,
|
||
props: {
|
||
pxData: {
|
||
type: Object,
|
||
require: false,
|
||
default: () => ({
|
||
wpx: 0,
|
||
hpx: 0
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
pxData: {
|
||
handler () {
|
||
// eslint-disable-next-line no-unused-expressions
|
||
this.myChart?.resize({ width: this.pxData.wpx, height: this.pxData.hpx })
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
data () {
|
||
this.myChart = null
|
||
return {
|
||
data: [],
|
||
radio: '7'
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
initGet () {
|
||
request({
|
||
url: '/api/system/datav/login_user/'
|
||
}).then((res) => {
|
||
this.data = res.data.login_user
|
||
this.drawLine(this.data)
|
||
})
|
||
},
|
||
// 生成一个随机整数
|
||
randomColor () {
|
||
const color = ['#fffff']
|
||
const ran = Math.floor(Math.random() * 4)
|
||
return color[ran]
|
||
},
|
||
drawLine () {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
// 绘制图表
|
||
const xAxisData = this.data.map(item => item.day)
|
||
const seriesData = this.data.map(item => item.count)
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||
textStyle: {
|
||
color: '#666'
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#999',
|
||
type: 'dotted',
|
||
width: 1
|
||
}
|
||
},
|
||
formatter: params => {
|
||
const param = params[0]
|
||
return `<div style="padding: 8px;"><div style="color: #333;">${param.name}</div><div style="color: #FFA500;">${param.value} 次</div></div>`
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['用户登陆数'],
|
||
textStyle: {
|
||
color: '#666',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
grid: {
|
||
top: 40,
|
||
left: 50,
|
||
right: 65,
|
||
bottom: 60
|
||
},
|
||
xAxis: {
|
||
data: xAxisData,
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#aaa',
|
||
width: 1
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 'auto',
|
||
maxInterval: 1,
|
||
rotate: 0,
|
||
textStyle: {
|
||
color: '#333',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#aaa',
|
||
width: 1
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#333',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#ddd',
|
||
type: 'dotted',
|
||
width: 1
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '用户登陆数',
|
||
type: 'line',
|
||
data: seriesData,
|
||
symbol: 'circle',
|
||
smooth: true,
|
||
symbolSize: 6,
|
||
lineStyle: {
|
||
color: 'rgba(0, 128, 255, 0.8)',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(0, 128, 255, 0.8)',
|
||
borderColor: 'rgba(0, 128, 255, 1)',
|
||
borderWidth: 1
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(140,189,250, 0.8)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(0, 128, 255, 0)'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
this.myChart.setOption(option)
|
||
}
|
||
},
|
||
mounted () {
|
||
this.myChart = this.$echarts.init(document.getElementById('myChart'))
|
||
this.initGet()
|
||
this.drawLine()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.card-view {
|
||
//border-radius: 10px;
|
||
color: $color-primary;
|
||
}
|
||
.el-card{
|
||
height: 100%;
|
||
}
|
||
::v-deep .el-card__body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.el-radio-button__inner {
|
||
border-radius: 20px;
|
||
}
|
||
</style>
|