|
|
@@ -1,24 +1,359 @@
|
|
|
<template>
|
|
|
- <el-card shadow="never" class="aui-card--fill">
|
|
|
- <div class="mod-home">
|
|
|
- <h3>工作台</h3>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">活动概览</div>
|
|
|
+ <div class="nums adf">
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>活动总数</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 458 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>未开始活动</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 158 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 0 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>进行中活动</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 140 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-bottom xj"></i>{{ 23 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>已结束活动</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 546 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 2 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>累计报名人数</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 5098 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 280 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>活动参与率</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 89 }}%</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 100 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre adffc">
|
|
|
+ <div class="nums-pre-title adfac">
|
|
|
+ <img src="" alt="">
|
|
|
+ <span>累计导入爱心值总额</span>
|
|
|
+ </div>
|
|
|
+ <div class="nums-pre-sz">{{ 985000 }}</div>
|
|
|
+ <div class="nums-pre-text adfac">较昨日<i class="el-icon-top ss"></i>{{ 8000 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" style="margin-top: 10px;">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">用户来源</div>
|
|
|
+ <div class="chartbox">
|
|
|
+ <div ref="yhlyRef" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">男女比例</div>
|
|
|
+ <div class="chartbox">
|
|
|
+ <div ref="nnblRef" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">活动成员年龄分布</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" style="margin-top: 10px;">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">爱心值变化趋势</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">活动参与用户排行榜</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-card class="box-card" shadow="none">
|
|
|
+ <div class="htitle">热门活动排名</div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
|
|
|
}
|
|
|
},
|
|
|
+ mounted () {
|
|
|
+ this.initYhlyChart()
|
|
|
+ this.initNnblChart()
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ initYhlyChart () {
|
|
|
+ let myChart = echarts.init(this.$refs.yhlyRef)
|
|
|
+ let echartData = [
|
|
|
+ {
|
|
|
+ value: 899,
|
|
|
+ name: '中国银行'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 899,
|
|
|
+ name: '平安银行'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1889,
|
|
|
+ name: '招商银行'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1199,
|
|
|
+ name: '建设银行'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 599,
|
|
|
+ name: '工商银行'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 399,
|
|
|
+ name: '浦发银行'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ let seriesData = echartData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ actValue: item.value,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ borderRadius: 50,
|
|
|
+ padding: [10, -10, 3, -3],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ formatter: '{white|{b}}\n{three| {d}人}',
|
|
|
+ rich: {
|
|
|
+ test: {},
|
|
|
+ white: {
|
|
|
+ align: 'center',
|
|
|
+ color: '#989998',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ three: {
|
|
|
+ color: '#252525',
|
|
|
+ align: 'center',
|
|
|
+ padding: [6, 0],
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 600
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ show: true,
|
|
|
+ text: '总人数',
|
|
|
+ itemGap: 10,
|
|
|
+ x: 'center',
|
|
|
+ y: '130',
|
|
|
+ subtext: '3897',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#989998'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#252525',
|
|
|
+ fontWeight: 600
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b}<br/>{c} 人',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#252525'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'pie',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '70%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ color: ['#0370F2', '#488CF6', '#4CAFF9', '#39CAFB', '#49DECA', '#16AECA'],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 10,
|
|
|
+ length2: 70,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#4CAFF9'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: seriesData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ this.resizeEcharts(this.$refs.yhlyRef)
|
|
|
+ },
|
|
|
+ initNnblChart () {
|
|
|
+ let myChart = echarts.init(this.$refs.nnblRef)
|
|
|
+ let echartsData = [{ value: 45, name: '女性' }, { value: 55, name: '男性' }]
|
|
|
+ let colorList = ['#F4657A', '#49DECA']
|
|
|
+ let option = {
|
|
|
+ backgroundColor: '#FFF',
|
|
|
+ color: colorList,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '70%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ fontSize: 16,
|
|
|
+ formatter: (params) => {
|
|
|
+ return `{a|${params.name}${params.value}%}`
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ align: 'left',
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#252525'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 10,
|
|
|
+ length2: 30
|
|
|
+ },
|
|
|
+ data: echartsData.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ label: {
|
|
|
+ color: colorList[index]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ this.resizeEcharts(this.$refs.nnblRef)
|
|
|
+ },
|
|
|
+ resizeEcharts (ele) {
|
|
|
+ let rate = 1920 / window.innerWidth
|
|
|
+ if (ele.style) {
|
|
|
+ ele.style.zoom = 1 * rate
|
|
|
+ ele.style.transform = `scale(${1 / rate})`
|
|
|
+ ele.style.transformOrigin = 'top left'
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.htitle {
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.nums{
|
|
|
+ margin-top: 26px;
|
|
|
+ &-pre{
|
|
|
+ width: calc(100% / 7);
|
|
|
+ border-left: 1px solid #ECEEF5;
|
|
|
+ padding-left: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &:first-child{
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &-title{
|
|
|
+ img{
|
|
|
+ width: 14px;height: 16px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 14px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-sz{
|
|
|
+ font-family: DINAlternate, DINAlternate;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ &-text{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6B7280;
|
|
|
+ line-height: 12px;
|
|
|
+ margin-top: 16px;
|
|
|
+ i{
|
|
|
+ margin: 0 3px 0 7px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bolder;
|
|
|
+ &.xj{color: #67C23A;}
|
|
|
+ &.ss{color: #F4657A;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.chartbox{
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
</style>
|
