SaaS-DataScreen/src/views/hui-jia/components/resident/index.vue

<template>
    <Card :title="title" :icon="icon" class="resident">
      <div class="display-flex w-full">
        <div class="gauge margin-r-30">
          <div ref="dom" class="hfw-gauge"></div>
        </div>
        <div class="num display-flex flex-1">
          <div v-for="item in residentData" :key="item.title" class="resident-item flex-1">
            <div class="title">{{ item.title }}</div>
            <div class="value">{{ item.value | formatNumber }}</div>
          </div>
        </div>
      </div>
      <div class="operate display-flex w-full" v-if="showOperate">
        <div v-for="item in operateData" :key="item.title" class="operate-item flex-1">
          <div class="icon margin-t-30">
            <img :src="item.icon" alt="" class="img">
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="value">{{ item.value | formatNumber }}</div>
        </div>
      </div>
    </Card>
  </template>
<script>
import * as echarts from 'echarts'
import Card from '@/views/hui-jia/components/card'
import icon from './images/icon-title.png'
import iconReport from './images/icon-report.png'
import iconQrcode from './images/icon-qrcode.png'
import iconPay from './images/icon-pay.png'
import { huiJiaApi } from '@/api'

export default {
  name: 'Resident',
  components: {
    Card
  },
  props: {
    showOperate: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      rate: 0,
      title: '用户信息',
      icon: icon,
      residentData: [
        {
          title: '公众号关注数',
          value: 1000,
          key: 'mpFollowCount'
        },
        {
          title: '绘服务绑定数',
          value: 1000,
          key: 'hfwBindCount'
        },
        {
          title: '日活跃数（近1月）',
          value: 1000,
          key: 'userLiveCount'
        }
      ],
      operateData: [
        {
          title: '绘服务缴费次数',
          value: 1000,
          icon: iconPay,
          key: 'payCount'
        },
        {
          title: '绘服务扫码次数',
          value: 1000,
          icon: iconQrcode,
          key: 'scanCodeCount'
        },
        {
          title: '绘服务报事次数',
          value: 1000,
          icon: iconReport,
          key: 'workCount'
        }
      ],
      colorArr: ['#182744', '#82D1F6', '#02338C']
    }
  },
  mounted () {
    this.getUsersStatistics()
  },
  methods: {
    getUsersStatistics () {
      huiJiaApi.getUsersStatistics().then(res => {
        if(res && res.data){
          this.rate = res.data.data.attentionRate || 0
          this.residentData.forEach(item => {
            item.value = res.data.data[item.key] || 0
          })
          this.operateData.forEach(item => {
            item.value = res.data.data[item.key] || 0
          })
          this.initChart()
        }
       
      })
    },
    initChart () {
      const myChart = echarts.init(this.$refs.dom)
      const option = {
        title: {
          show: true,
          text: [`{titleBg|关注率}`],
          left: 'center',
          bottom: '0',
          textStyle: {
            rich: {
              titleBg: {
                backgroundColor: '#14223C',
                borderRadius: 4,
                height: 26,
                width: 70,
                color: '#00CAFF',
                fontSize: 14
              }
            }
          }
        },
        angleAxis: {
          show: false,
          max: 100 * 360 / 270, // -45度到225度，二者偏移值是270度除360度
          type: 'value',
          startAngle: 225, // 极坐标初始角度
          splitLine: {
            show: false
          }
        },
        barMaxWidth: 16, // 圆环宽度
        radiusAxis: {
          show: false,
          type: 'category'
        },
        // 圆环位置和大小
        polar: {
          center: ['50%', '50%'],
          radius: '170%'
        },
        series: [{
          type: 'bar',
          data: [{ // 上层圆环，显示数据
            value: 75,
            itemStyle: {
              color: { // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1, // 从左到右 0-1
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: this.colorArr[1]
                }, {
                  offset: 1,
                  color: this.colorArr[2]
                }]
              }
            }
          }],
          // barGap: '-100%', // 柱间距离,上下两层圆环重合
          coordinateSystem: 'polar',
          roundCap: true // 顶端圆角从 v4.5.0 开始支持
          // z: 2 // 圆环层级，同zindex
        },
        { // 下层圆环，显示最大值
          type: 'bar',
          data: [{
            value: 100,
            itemStyle: {
              color: this.colorArr[0]
            }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 1
        },
        // 仪表盘
        {
          name: '关注率',
          type: 'gauge',
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          title: {
            offsetCenter: [0, '45%'],
            fontSize: 14,
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            color: '#5774A2'
          },
          detail: {
            formatter: '{value}%',
            offsetCenter: [0, '-10%'],
            fontSize: 22,
            fontFamily: 'DS-Digital',
            fontWeight: 'bold',
            color: '#00D2ED'
          },
          data: [{
            value: this.rate,
            name: '绘服务'
          }]
        }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.resident{
  .gauge{
    width: 50%;
    .hfw-gauge{
      width: halfW(220);
      height: halfH(220);
      margin: 0 auto;
    }
  }
  .num{
    flex-direction: column;
    text-align: center;
    gap: halfH(20);
    .resident-item{
      align-content: center;
    }
    .title{
      font-size: halfW(16);
      color: #82D1F6;
    }
    .value{
      font-size: halfW(20);
      color: #FFFFFF;
      margin-top: halfH(10);
    }
  }
  .operate{
    width: 100%;
    height: calc(45%);
    text-align: center;
    border-radius: 5px;
    background-color: rgba(17, 28, 48, 1);
    border: 1px solid rgba(0, 123, 211, 0.2);
    align-items: center;
    .operate-item{
      border-right: 1px solid rgba(0, 123, 211, 0.2);
    }
    .operate-item:last-child{
      border-right: none;
    }
    .img{
      width: halfW(40);
      height: halfW(40);
    }
    .title{
      font-size: halfW(20);
      color: #82D1F6;
      margin: halfH(20) 0;
    }
    .value{
      font-size: halfW(20);
      color: #FFFFFF;
    }
  }
}
</style>