<template>
    <div class="ringContainer">
        <ve-ring :data="chartData" width="100px" height="180px" :settings="chartSettings" :extend="chartExtend"
                 :legend-visible="false"></ve-ring>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                days: 13,
                chartData: {
                    columns: ['日期', '访问用户'],
                    rows: [
                        {'日期': '1/1', '访问用户': 1393},
                        {'日期': '1/2', '访问用户': 3342},
                    ]
                },
                chartSettings: {
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '12',
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    radius: [
                        '44', '46'
                    ],
                    offsetY: 50
                },
                chartExtend: {
                    color: ['#6DC1FF', '#000F2A'],

                }
            }
        },
        mounted() {
            let that = this;
            // this.timer = setInterval(() => {
            that.getDate();
            // }, 3300);
        },
        methods: {
            getDate() {
                let that = this;
                let newDate1 = that.getRandomInt(1000, 25000);
                let newDate2 = that.getRandomInt(1000, 2500);
                this.chartData.rows = [
                    {'日期': '1/1', '访问用户': newDate1},
                    {'日期': '1/2', '访问用户': 2000},
                ]
            },
            getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        },
    }
</script>

<style scoped>
.ringContainer {
    /*width: 100px;*/
    /*height: 100px;*/
    /*overflow: hidden;*/
    /*display: block;*/
    /*margin: 0 auto;*/
}
</style>
