boss_app/components/tableCharts/payMethods.vue

<template>
<div>
    <uni-table style="margin-top:40px;" ref="table" :loading="loading" border stripe type="" emptyText="暂无更多数据" @selection-change="selectionChange">
        <uni-tr>
            <uni-th width="60" align="center">收款方式</uni-th>
            <uni-th width="60" align="center">房费</uni-th>
            <uni-th width="60" align="center">非房费</uni-th>
            <uni-th width="60" align="center">小计</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
            <uni-td align="center">{{ item.name }}</uni-td>
            <uni-td align="center">
                {{ item.room_money }}
            </uni-td>
            <uni-td align="center">{{ item.other_money }}</uni-td>
            <uni-td align="center">
                {{ item.room_money*1+item.other_money }}
            </uni-td>
        </uni-tr>
    </uni-table>
    <div style="margin-top:20px;">
        <ucharts :chartData="chartsData" :type="'column'"></ucharts>
    </div>
    <div style="margin-top:20px;">
        <pieCharts :chartData="chartsPieData"></pieCharts>
    </div>
</div>
</template>

<script>
import ucharts from '../echarts/line.vue'
import pieCharts from '../echarts/pie.vue'
export default {
    components: {
        ucharts,
        pieCharts
    },
    props:{
        tableData:{
            type:Array,
            default(){
                return []
            }
        }
    },
    computed:{
        chartsData(){
            let categories = [];
            let series = [];
            let obj = {name:'房费',data:[]};
            let obj1 = {name:'非房费', data:[]}
            let obj2 = {name:'小计', data:[]}
            if (this.tableData.length == 0) {
                return { categories, series }
            }
            this.tableData.forEach(ele=>{
                categories.push(ele.name)
                obj.data.push(ele.room_money)
                obj1.data.push(ele.other_money)
                obj2.data.push(ele.room_money*1+ele.other_money*1)
            })
            series = [obj, obj1, obj2]
            return { categories, series }
        },
        chartsPieData(){
            console.log('111111111',this.tableData);
            let series= []
            this.tableData.forEach(ele=>{
                series.push({name:ele.name,value:((ele.room_money*1+ele.other_money*1)/this.tableData.reduce((pre, cur)=> pre+(cur.room_money*1+cur.other_money*1), 0 )).toFixed(0)})
            })
            console.log('222222222222',series);
            return series
        }
    },
    data() {
        return {
            loading:false,
        }
    }
}
</script>

<style lang="scss">

</style>