<template>
    <div class="rightChartcenter">
        <div class="rightChartcenter-title">本月租金收入（元）</div>
        <div id="chartsrightcenter" :style="{ height: '250px', width: '100%' }"></div>
        <!-- <div class="gohome" @click="gotohome">
            <i class="gongyu gy-zhuye"></i>
        </div> -->
    </div>
</template>

<script>
import { httpGet } from '../../api';
import router from '../../router';
export default {
    name: "rightChartcenter",
    data() {
        return {
            charts: {
                // title: {
                //     text: '本月租金收入（元）',
                //     left: 'center',
                //     textStyle: {
                //         // color: '#00BFFF',
                //         fontWeight: 'bold',
                //         fontSize: 20
                //     }
                // },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['公寓', '房源', '平山村'],
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        data: [3521, 2250, 1542],
                        type: 'bar',
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)',
                        },
                        itemStyle: {
                            normal: {
                                //这里是颜色
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            }
        }
    },
    methods: {
        gotohome() {
            router.push({
                path: '/home'
            })
        }
    },
    mounted() {
        let charts = this.charts
        httpGet('', this.$api.getStatisticsRevenueTop).then(res => {
            if (res.success) {
                let date = new Date()
                let month = date.getMonth() + 1
                res.data.map(li => {
                    if (li.month == month) {
                        if (li.name == '公寓') {
                            charts.series[0].data[0] = li.rent
                        } else if (li.name == '房源') {
                            charts.series[0].data[1] = li.rent
                        } else if (li.name == '平山村') {
                            charts.series[0].data[2] = li.rent
                        }
                    }
                })
                let chartsObj = this.$echarts.init(
                    document.getElementById('chartsrightcenter')
                )
                chartsObj.setOption(charts, true)
            }
        })
    }
}
</script>

<style scoped>
.rightChartcenter {
    margin-top: 20px;
    position: relative;
}

.gohome {
    position: absolute;
    top: 3%;
    right: 10%;
    z-index: 999;
    cursor: pointer;
}

.gy-zhuye {
    font-size: 25px;
    color: #00BFFF;
}

.rightChartcenter-title {
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
    padding: 10px;
}</style>