|
|
@@ -85,6 +85,9 @@
|
|
|
<el-col :span="8">
|
|
|
<el-card class="box-card" shadow="none">
|
|
|
<div class="htitle">活动成员年龄分布</div>
|
|
|
+ <div class="chartbox">
|
|
|
+ <div ref="nlfbRef" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -92,16 +95,66 @@
|
|
|
<el-col :span="8">
|
|
|
<el-card class="box-card" shadow="none">
|
|
|
<div class="htitle">爱心值变化趋势</div>
|
|
|
+ <div class="chartbox two">
|
|
|
+ <div class="query adfac">
|
|
|
+ <el-select v-model="year" placeholder="年份" style="width: 82px;margin-left: 8px;">
|
|
|
+ <el-option v-for="item in yearList" :label="item" :value="item" :key="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="month" placeholder="月份" style="width: 82px;margin-left: 8px;">
|
|
|
+ <el-option v-for="item in 12" :label="item+'月'" :value="item" :key="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="quarter" placeholder="季度" style="width: 82px;margin-left: 8px;">
|
|
|
+ <el-option v-for="item in 4" :label="item+'季度'" :value="item" :key="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div ref="bhqsRef" 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 two adffc">
|
|
|
+ <div class="th adf">
|
|
|
+ <div class="th-pre tp1">排名</div>
|
|
|
+ <div class="th-pre tp2">姓名</div>
|
|
|
+ <div class="th-pre tp3">渠道</div>
|
|
|
+ <div class="th-pre tp4">参与次数</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-item adf" v-for="(item,index) in 8" :key="index">
|
|
|
+ <div class="list-item-pre lip1 adfacjc">
|
|
|
+ <div :class="{'red':index===0,'yellow':index===1,'green':index===2}">{{ index + 1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-item-pre lip2">{{ '周晓瑾' }}</div>
|
|
|
+ <div class="list-item-pre lip3">{{ '建设银行' }}</div>
|
|
|
+ <div class="list-item-pre lip4">{{ '999次' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
<el-card class="box-card" shadow="none">
|
|
|
<div class="htitle">热门活动排名</div>
|
|
|
+ <div class="chartbox two adffc">
|
|
|
+ <div class="th adf">
|
|
|
+ <div class="th-pre tp1">排名</div>
|
|
|
+ <div class="th-pre tp2">活动名称</div>
|
|
|
+ <div class="th-pre tp3">爱心值捐赠量</div>
|
|
|
+ <div class="th-pre tp4">参与人数</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="list-item adf" v-for="(item,index) in 8" :key="index">
|
|
|
+ <div class="list-item-pre lip1 adfacjc">
|
|
|
+ <div :class="{'red':index===0,'yellow':index===1,'green':index===2}">{{ index + 1 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-item-pre lip2">{{ '环保知识知多少' }}</div>
|
|
|
+ <div class="list-item-pre lip3">{{ '9527' }}</div>
|
|
|
+ <div class="list-item-pre lip4">{{ '888人' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -113,12 +166,17 @@ import * as echarts from 'echarts'
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
-
|
|
|
+ year: '',
|
|
|
+ yearList: [new Date().getFullYear(), new Date().getFullYear() - 1, new Date().getFullYear() - 2, new Date().getFullYear() - 3, new Date().getFullYear() - 4],
|
|
|
+ month: '',
|
|
|
+ quarter: ''
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
this.initYhlyChart()
|
|
|
this.initNnblChart()
|
|
|
+ this.initNlfbChart()
|
|
|
+ this.initBhqsChart()
|
|
|
},
|
|
|
methods: {
|
|
|
initYhlyChart () {
|
|
|
@@ -243,6 +301,37 @@ export default {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
+ legend: {
|
|
|
+ itemWidth: 10, // 图例标记的图形宽度
|
|
|
+ itemHeight: 10, // 图例标记的图形高度
|
|
|
+ icon: 'circle', // 图例项的 icon
|
|
|
+ top: 'bottom', // 图例组件离容器右侧的距离
|
|
|
+ itemGap: 50,
|
|
|
+ data: echartsData, // 图例的数据数组
|
|
|
+ formatter: (name) => { // 用来格式化图例文本
|
|
|
+ const value = echartsData.find(item => item.name === name).value
|
|
|
+ const sum = echartsData.reduce((total, item) => total + item.value, 0)
|
|
|
+ return `{name|${name}}：{value|${value}人} {bl|${((value / sum) * 100).toFixed(0)}%}`
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: '#6B7280',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ color: '#252525',
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 4],
|
|
|
+ fontWeight: 600
|
|
|
+ },
|
|
|
+ bl: {
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 4]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [{
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
@@ -281,6 +370,131 @@ export default {
|
|
|
myChart.setOption(option)
|
|
|
this.resizeEcharts(this.$refs.nnblRef)
|
|
|
},
|
|
|
+ initNlfbChart () {
|
|
|
+ let myChart = echarts.init(this.$refs.nlfbRef)
|
|
|
+ const dataValues = [24, 34, 16, 20, 6]
|
|
|
+ const totalSum = dataValues.reduce((a, b) => a + b, 0)
|
|
|
+ let option = {
|
|
|
+ color: ['#05A9FE'],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['10岁以下', '10-20岁', '20-40岁', '40-60岁', '60岁以上']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ top: '16%',
|
|
|
+ bottom: '2%'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: dataValues,
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ formatter: function (params) {
|
|
|
+ const percentage = ((params.value / totalSum) * 100).toFixed(1)
|
|
|
+ return percentage + '%'
|
|
|
+ },
|
|
|
+ color: '#252525',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ barMaxWidth: 25
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ this.resizeEcharts(this.$refs.nlfbRef)
|
|
|
+ },
|
|
|
+ initBhqsChart () {
|
|
|
+ let myChart = echarts.init(this.$refs.bhqsRef)
|
|
|
+ let option = {
|
|
|
+ color: ['#74E1F9', '#7C75FF'],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ top: '20%',
|
|
|
+ bottom: '1%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['累计导入', '累计捐赠'],
|
|
|
+ top: '5%',
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '累计导入',
|
|
|
+ data: [30, 170, 30, 80, 50, 160, 20],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#74E1F9'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#4FEDDB'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ showSymbol: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '累计捐赠',
|
|
|
+ data: [200, 90, 130, 90, 220, 60, 80],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.2,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#7C75FF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#3EB1E8'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ showSymbol: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ this.resizeEcharts(this.$refs.bhqsRef)
|
|
|
+ },
|
|
|
resizeEcharts (ele) {
|
|
|
let rate = 1920 / window.innerWidth
|
|
|
if (ele.style) {
|
|
|
@@ -355,5 +569,87 @@ export default {
|
|
|
.chartbox{
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
+ position: relative;
|
|
|
+ &.two{
|
|
|
+ height: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .th{
|
|
|
+ height: 36px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ margin-top: 20px;
|
|
|
+ &-pre{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #646464;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ &.tp1{
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ &.tp2,&.tp3,&.tp4{
|
|
|
+ width: calc((100% - 50px) / 3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ &-item{
|
|
|
+ margin-top: 15px;
|
|
|
+ &-pre{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ &.lip1{
|
|
|
+ width: 50px;
|
|
|
+ &>div{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #C1C7D2;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ &.red{
|
|
|
+ background: #FF4943;
|
|
|
+ }
|
|
|
+ &.yellow{
|
|
|
+ background: #FFC00A;
|
|
|
+ }
|
|
|
+ &.green{
|
|
|
+ background: #00AE57;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.lip2,&.lip3,&.lip4{
|
|
|
+ width: calc((100% - 50px) / 3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .query{
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ right: 11px;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-input__inner{
|
|
|
+ height: 24px !important;
|
|
|
+ line-height: 24px !important;
|
|
|
+}
|
|
|
+::v-deep .el-input__icon{
|
|
|
+ line-height: 24px !important;
|
|
|
}
|
|
|
</style>
|
