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="" 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>