assess-app/pages/statistics/module/stat_finance_chart.vue

<template>
	<view class="page-box-bg-fff m-t20 r-30 p-30">
		<!-- 模块title -->
		<StatisticsTitle :genre="0" :leftText="'财务汇总占比'" :rightText="'同比环比'" ></StatisticsTitle>
		<view class="content_chart row-justify-sb center">
			<view class="chart_item column-c sys-from-background-color m-r30 r-20 p-tb20">
				<CircleChart ref="outObj" :bgColor="'#2B7DFA'"></CircleChart>
				<text class="size-24 sys-from-background-color m-t16">放款</text>
			</view>
			<view class="chart_item column-c sys-from-background-color r-20 p-tb20">
				<CircleChart ref="putObj" :bgColor="'#ED9A2C'"></CircleChart>
				<text class="size-24 sys-from-background-color m-t16">回款</text>
			</view>
		</view>
	</view>
</template>

<script>
	import CircleChart from "@/common/chart/circle_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'stat_finance_chart',
    props:{
      'moneyData':{
        default:()=>{
          return {
            out_money: 0,
            out_num: 0,
            put_money: 0,
            put_num: 0,
          }
        }
      }
    },
		components: {
			CircleChart,
			StatisticsTitle
		},
    watch:{
      'moneyData':function (){
        this.initData()
      },
      'outRatio':function (){
        this.$refs.outObj.setServerData(this.outRatio)
      },
      'putRatio':function () {
        this.$refs.putObj.setServerData(this.putRatio)
      }
    },
		data() {
			return {
        totalMoney:0,
        outRatio:0,
        putRatio:0,
			};
		},
		methods: {
      initData(){
        this.totalMoney=this.moneyData.out_money+this.moneyData.put_money
        if(this.totalMoney>0){
          this.outRatio=(this.moneyData.out_money/this.totalMoney).toFixed(2)
          this.putRatio=(this.moneyData.put_money/this.totalMoney).toFixed(2)
        }
      },

		}
	}
</script>

<style lang="scss" scoped>
	.content_chart {
		text-align: center;

		.chart_item {
			width: 330rpx;

			.num {
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #F7F9FE;
				border-radius: 10rpx;
			}
		}
	}
</style>