boss_app/components/tableCharts/feeItems.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-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>{{ item.date }}</uni-td> -->
            <uni-td align="center">
                <view class="name">{{ item.name }}</view>
            </uni-td>
            <uni-td align="center">{{ item['微信'] }}</uni-td>
            <uni-td align="center">{{ item['支付宝'] }}</uni-td>
            <uni-td align="center">{{ item['现金'] }}</uni-td>
            <uni-td align="center">{{ item['银联卡'] }}</uni-td>
            <uni-td align="center">{{ item['其他'] }}</uni-td>
            <uni-td align="center">{{ filter(item) }}</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 []
            }
        }
    },
    data() {
        return {
            loading:false,
        }
    },
    computed: {
        chartsData() {
            let categories = [];
            let series = [];
            let obj = {
                name: '小计',
                data: []
            }
            console.log(this.tableData);
            if (!this.tableData || this.tableData.length === 0) {
                return {
                    categories,
                    series
                }
            } else {
                this.tableData.forEach(ele => {
                    categories.push(ele.name)
                    obj.data.push(this.filter(ele))
                })
                series = [obj]
                return {
                    categories,
                    series
                }
            }
        },
        chartsPieData() {
            console.log('111111111', this.tableData);
            let series = []
            this.tableData.forEach(ele => {
                series.push({
                    name: ele.name,
                    value: this.filter(ele)
                })
            })
            console.log('222222222222', series);
            return series
        },
    },
    methods:{
        filter(object){
            let arr = Object.keys(object).filter(item=>item!='name')
            let count = 0
            arr.forEach(item=>{
                count += object[item]
            })
            return count
        }
    }
}
</script>

<style lang="scss">
/deep/.uni-table {
    min-width: 100vw !important;
}

/deep/.uni-table-th {
    font-size: 12px !important;
}
</style>