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

<template>
    <Card :title="title" :icon="icon" class="resident">
      <div class="display-flex">
        <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="content">
              <div class="title">{{ item.title }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="operate display-flex">
        <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="content">
            <div class="title">{{ item.title }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </Card>
  </template>
<script>
import * as echarts from 'echarts'
import Card from '@/views/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'

export default {
  name: 'Resident',
  components: {
    Card
  },
  data () {
    return {
      title: '用户信息',
      icon: icon,
      residentData: [
        {
          title: '公众号关注数',
          value: 1000
        },
        {
          title: '绘服务绑定数',
          value: 1000
        },
        {
          title: '日活跃数（近1月）',
          value: 1000
        }
      ],
      operateData: [
        {
          title: '绘服务缴费次数',
          value: 1000,
          icon: iconPay
        },
        {
          title: '绘服务扫码次数',
          value: 1000,
          icon: iconQrcode
        },
        {
          title: '绘服务报事次数',
          value: 1000,
          icon: iconReport
        }
      ],
      colorArr: ['#182744', '#82D1F6', '#02338C']
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const myChart = echarts.init(this.$refs.dom)
      const option = {
        name: '仪表盘',
        grid: {
          top: '0px',
          bottom: '5px',
          left: '0px',
          right: '0px'
        },
        title: {
          show: true,
          text: [`{titleBg|关注率}`],
          left: 'center',
          bottom: '0',
          textStyle: {
            rich: {
              titleBg: {
                backgroundColor: '#14223C',
                borderRadius: 4,
                height: 26,
                width: 70,
                color: '#00CAFF',
                fontSize: 16
              }
            }
          }
        },
        series: [
          {
            type: 'gauge',
            radius: '100%',
            name: '绘服务',
            axisLine: {
              show: true,
              lineStyle: {
                width: 15,
                color: [
                  [
                    0,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: this.colorArr[1]
                      },
                      {
                        offset: 1,
                        color: this.colorArr[2]
                      }
                    ])
                  ],
                  [
                    1, this.colorArr[0]
                  ]
                ]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              offsetCenter: [0, '25%'],
              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: 75, name: '绘服务' }]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
@import '@/assets/css/screen.scss';

.resident{
  .gauge{
    width: halfW(220);
    padding-top: halfH(30);
    .hfw-gauge{
      width: halfW(193);
      height: halfH(193);
    }
  }
  .num{
    flex-direction: column;
    text-align: center;
    line-height: halfH(35);
    padding-left: halfW(30);
    .title{
      font-size: halfH(14);
      color: #82D1F6;
      text-align: left;
    }
    .value{
      font-size: halfH(20);
      color: #FFFFFF;
      margin-left: halfW(50);
    }
  }
  .operate{
    height: halfH(215);
    text-align: center;
    border-radius: 5px;
    background-color: rgba(17, 28, 48, 1);
    border: 1px solid rgba(0, 123, 211, 0.2);
    padding: halfH(20) 0;
    line-height: halfH(40);
    margin-top: halfH(60);
    .operate-item{
      border-right: 1px solid rgba(0, 123, 211, 0.2);
    }
    .operate-item:last-child{
      border-right: none;
    }
    .img{
      width: halfW(48);
      height: halfH(48);
    }
    .content{
      margin-top: halfH(25);
    }
    .title{
      font-size: halfH(20);
      color: #82D1F6;
    }
    .value{
      font-size: halfH(20);
      color: #FFFFFF;
    }
  }
}
</style>