You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.9 KiB
131 lines
2.9 KiB
<template>
|
|
<div>
|
|
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="访问统计">
|
|
<div slot="content"></div>
|
|
<slot>
|
|
<div>
|
|
<el-date-picker
|
|
type="month"
|
|
size="small"
|
|
v-model="select.month"
|
|
value-format="yyyy-MM"
|
|
style="width: 200px;">
|
|
</el-date-picker>
|
|
|
|
<el-button size="small" type="primary" style="margin-left: 10px;" @click="getData">查询</el-button>
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
|
|
<div style="display: flex;margin-top: 20px">
|
|
<div v-if="data" class="box">
|
|
<div style="border-bottom: 2px solid rgba(200,200,200,0.7);padding-bottom: 20px">
|
|
<i class="el-icon-coin"></i>
|
|
<span style="font-weight: 600;padding: 0 10px">访问统计</span>
|
|
</div>
|
|
|
|
<div id="doughnut-chart"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { month } from "@/api/statics";
|
|
import echarts from "echarts";
|
|
export default {
|
|
data() {
|
|
return {
|
|
chart: '',
|
|
select: {
|
|
date: this.$moment(new Date()).format('YYYY-MM')
|
|
},
|
|
data: {}
|
|
}
|
|
},
|
|
methods: {
|
|
init () {
|
|
this.chart = echarts.init(document.getElementById('doughnut-chart'))
|
|
let colors = ['#00A82A', '#70e1f5', '#ffd194', '#FF6B6B', '#6E48AA', '#4B1248']
|
|
let data = this.data.map((i, index) => {
|
|
return {
|
|
value:i.total,
|
|
name:i.leixing,
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[(index+1)%6]
|
|
},
|
|
},
|
|
}
|
|
})
|
|
this.chart.setOption(
|
|
{
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['46%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '15',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data
|
|
}
|
|
]
|
|
}
|
|
)
|
|
},
|
|
|
|
|
|
async getData () {
|
|
const res = await month(this.select)
|
|
this.data = res
|
|
this.init()
|
|
}
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.getData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
flex: 1;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-right: 40px;
|
|
|
|
#doughnut-chart {
|
|
|
|
box-sizing: border-box;
|
|
min-height: 260px;
|
|
}
|
|
|
|
}
|
|
</style>
|