<template>
    <div>
        <div>
            <div id="main1" :style="{width: '1500px', height: '550px'}"></div>
        </div>
    </div>
</template>

<script scoped>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    import moment from 'moment'//导入文件

    export default {
        name: 'Echarts',
        data(){
            return{
                msg: 'Welcome to Your Vue.js App',
                ageArr:[],
                ageNum:[],
                sex:[],
                sexNum:[],
                totalNum:'',
            };
        },
        created(){
            this.getUserInfo();
        },
        mounted(){
            // 这个定时任务其实不想用来着，但是不用的话 数据无法正常显示
            // 等ecahrs图标正确显示完，在问下阔生这个问题
            // 定时任务
            let that = this;
            setTimeout(function () {
                that.myEcharts1();
            },200)

        },
        methods:{
            myEcharts1(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main1'));
                // 指定图表的配置项和数据
                let option = {
                    width: "75%",
                    height:"75%",
                    label: {
                        backgroundColor: "rgba(33, 25, 96, 0.5)",
                        borderColor: "#222b5e",
                        borderWidth:1,
                        borderRadius:0,
                        padding:(0,1,8),
                        fontSize:20,
                        fontFamily: "AharoniBold",
                        align:"center",
                    },
                    series : [
                        {
                            name: '用户年龄+性别分布',
                            type: 'pie',
                            radius: ['17%','75%'],//[number(内圈环) string(外半径为可视区尺寸)] Array
                            center: ["51.3%", "45.5%"],
                            roseType: 'area',//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                            //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
                            // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
                            data:this.ageArr,
                            labelLine: {
                                lineStyle: {//所有属性
                                    color: "#2da2fd",
                                    width: 2
                                },
                                length2: 30
                            },
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            getUserInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/user/ageGroupFind')
                    .then(res=>{
                        this.ageArr=res.data;
                    })
            },
        }
    }

</script>
