boss_app/components/tableCharts/time.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.time }}</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;">
        <ucharts :chartData="chartsData" :type="'line'"></ucharts>
    </div>
</div>
</template>

<script>
import ucharts from '../echarts/line.vue'
export default {
    components: {
        ucharts
    },
    props: {
        tableData: {
            type: Array,
            default () {
                return []
            }
        }
    },
    computed: {
        chartsData() {
            let categories = [];
            let series = [];
            let obj = {
                name: '房费',
                data: []
            };
            let obj1 = {
                name: '非房费',
                data: []
            }
            let obj2 = {
                name: '小计',
                data: []
            }
            console.log(this.tableData);
            if (!this.tableData || this.tableData.length === 0) {
                return {
                    categories,
                    series
                }
            } else {
                this.tableData.forEach(ele => {
                    categories.push(ele.time)
                    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
                }
            }

        }
    },
    mounted() {
        console.log(this.tableData);

    },
    data() {
        return {
            loading: false,
        }
    }
}
</script>

<style>
</style>