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

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-26 10:57:30
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-18 09:46:07
 * @Description: 收入统计
 -->
<template>
  <div class="income">
    <div class="panel b1">
      <div class="panel-icon"></div>
      <div class="panel-txt">应收</div>
      <div class="panel-desc">￥{{billSum.billReceivable | moneyFormat}}</div>
    </div>
    <div class="panel b2">
      <div class="panel-icon"></div>
      <div class="panel-txt">实收</div>
      <div class="panel-desc">￥{{billSum.billReceived | moneyFormat}}</div>
    </div>
    <div class="panel b3">
      <div class="panel-icon"></div>
      <div class="panel-txt">线上</div>
      <div class="panel-desc">￥{{billSum.billOnlineSum | moneyFormat}}</div>
    </div>
    <div class="map" id="mapId"></div>
    <div class="progress">
      <div class="desc">
        <div class="desc-lf">收费率</div>
        <div class="desc-lr">{{billSum.billRate}}%</div>
      </div>
      <el-progress
        :percentage="percentage"
        :show-text="false"
        color="#2FCD76"
        :stroke-width="8"
      ></el-progress>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { api } from '@/api'

export default {
  data () {
    return {
      billSum: {
        billReceivable: '',
        billReceived: '',
        billOnline: '',
        billUnderline: '',
        billRate: ''
      },
      percentage: 98.4
    }
  },
  mounted () {
    api.getBillSum().then(res => {
      res.data.data.forEach(item => {
        this.billSum[item.type] = item.total
        if (item.type === 'billRate') {
          this.percentage = JSON.parse(item.total)
        }
      })
      this.createIncomeMap()
    })
  },
  methods: {
    /**
     * 占比
     */
    createIncomeMap () {
      var myChart = echarts.init(document.getElementById('mapId'))
      var option = {
        title: [
          {
            text: '缴费方式',
            textStyle: {
              fontSize: 10,
              color: '#F0F0F0',
              fontWeight: 'normal'
            },
            left: '41%',
            top: '45%'
          }
        ],
        series: [
          {
            // name: '缴费方式',
            radius: ['40%', '60%'],
            hoverAnimation: false,
            type: 'pie',
            center: ['50%', '50%'],
            label: {
              normal: {
                formatter: '{b|{b}}\n{per|{d}%}',
                fontSize: 10,
                lineHeight: 14,
                rich: {
                  b: {
                    color: '#5774A2',
                    fontSize: 10
                  }
                }
              }
            },
            data: [
              {
                value: this.billSum.billOnline,
                name: '线上',
                label: {
                  show: true,
                  color: '#00CCFF'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#2E38EE' },
                      { offset: 1, color: '#8E44C6' }
                    ]
                  )
                }
              },
              {
                value: this.billSum.billUnderline,
                name: '线下',
                label: {
                  show: true,
                  color: '#00CCFF'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#1BA71E' },
                      { offset: 1, color: '#8EBB16' }
                    ]
                  )
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>