SxsnPC/src/views/modules/home.vue

<template>
  <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="@/assets/img/home_activity1.png">
                <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="@/assets/img/home_activity2.png">
                <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="@/assets/img/home_activity3.png">
                <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="@/assets/img/home_activity4.png">
                <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="@/assets/img/home_activity5.png">
                <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="@/assets/img/home_activity6.png">
                <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="@/assets/img/home_activity7.png">
                <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>
          <div class="chartbox">
            <div ref="nlfbRef" style="width: 100%;height: 100%;"></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 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>
  </div>
</template>

<script>
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 () {
      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'
        },
        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',
          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)
    },
    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) {
        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;
  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>