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

<script scoped>
    const axios=require('axios');

    export default {
        name: 'Echarts',
        props: {
            //数据
            data: {
                type: Array,
                default: () => {
                    return [];
                }
            },
        },
        data() {
            return {
                menArr1:'',
                womenArr1:'',
            };
        },
        created(){
        },
        mounted(){
            this.getUserInfo();
            this.getAgeSexNumInfo();
            let that = this;
            setTimeout(function () {
                that.myEcharts11();
            },200)
        },
        methods:{
            myEcharts11(){
                var labelData = this.data.map(item=>item.label);

                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main22'));
                // 指定图表的配置项和数据
                let option = {
                    height:"100%",
                    xAxis: [
                        {
                            type: "value",
                            show: false,
                            min: -100,//这显示当前年龄段的总数
                            max: 0,
                            gridIndex: 0,
                            axisTick: { show: false, inside: false },
                            axisLabel: { show: false },
                            axisLine: {
                                // Y轴轴线样式
                                show: false,
                                lineStyle: {
                                    color: "#000"
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        {
                            type: "value",
                            show: false,
                            gridIndex: 1,
                            min: 0,
                            max: 100,
                            axisTick: { show: false }, //是否显示刻度
                            axisLine: {
                                // Y轴轴线样式
                                show: false, // 是否显示X轴
                                lineStyle: {
                                    color: "#000"
                                }
                            },
                            axisLabel: {
                                show: false //是否显示X轴内容
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "category",
                            show: false,
                            gridIndex: 0,
                            inverse: true,
                            axisTick: { show: false },
                            axisLabel: { show: false },
                            axisLine: {
                                // Y轴轴线样式
                                show: false,
                                lineStyle: {
                                    color: "#000"
                                }
                            }
                        },
                        {
                            type: "category",
                            show: false,
                            gridIndex: 1,
                            inverse: true,
                            // data:0, //几行？
                            axisTick: { show: false },
                            axisLabel: {},
                            axisLine: {
                                show: false //是否显示轴线
                            }
                        }
                    ],
                    grid: [
                        {
                            top: "-2%",
                            bottom: "0%",
                            width: "35%",
                            left: "0%",
                            gridIndex: 0
                        },
                        {
                            top: "-2%",
                            bottom: "0%",
                            width: "35%",
                            left: "60%",
                            gridIndex: 1
                        }
                    ],
                    series : [
//----------------------------------------------------男
                        {
                            name: '男性年龄分布',
                            type: 'bar',
                            z: 100,
                            barWidth:22,
                            gridIndex: 0,
                            itemStyle: {
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0, 1, 1, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#1661c6" // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#1a9dff" // 100% 处的颜色
                                            }
                                        ],
                                        false
                                    ),
                                    show: true,
                                    barBorderRadius: 50,
                                    label: {
                                        show: true,
                                        position: "insideLeft",
                                        fontFamily: "AharoniBold",
                                        color: "#fff",
                                        fontSize: 22,
                                        fontWeight: 800,
                                        formatter: function(v) {
                                           return v.data.count * -1;
                                           // return 50;
                                        }
                                    }
                                }
                            },
                            // data: [-10,-60,-70,-80,-90]
                            data:this.menArr1
                        },
                        {
                            name: "男性年龄分布外框",
                            type: "bar",
                            barWidth: 22,
                            barGap: "-100%",
                            z: 0,
                            gridIndex: 0,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: "rgba(225,225,225, 0.2)",
                                    barBorderRadius: 50
                                }
                            },
                            data: [-100,-100,-100,-100,-100]
                        },
//----------------------------------------------------女
                        {
                            name: "女性年龄分布",
                            type: "bar",
                            barWidth: 22,
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            z: 100,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: new this.$echarts.graphic.LinearGradient(
                                        0, 1, 1, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: "#e98000" // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#fab011" // 100% 处的颜色
                                            }
                                        ],
                                        false
                                    ),
                                    barBorderRadius: 50,
                                    borderWidth: 0,
                                    borderColor: "#fff",
                                    label: {
                                        fontFamily: "AharoniBold",
                                        show: true,
                                        color: "#fff",
                                        fontSize: 22,
                                        fontWeight: 800,
                                        position: "insideRight",
                                        formatter: function(v) {
                                            return v.data.count;
                                        }
                                    }
                                }
                            },
                            // data: [50,60,70,80,90]
                            data: this.womenArr1
                        },
                        {
                            name: "女性年龄分布外框",
                            z: 0,
                            type: "bar",
                            barWidth: 22,
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            barGap: "-100%",
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: "rgba(225,225,225, 0.2)",
                                    barBorderRadius: 50,
                                    borderWidth: 0,
                                    borderColor: "#fff"
                                }
                            },
                            data: [100,100,100,100,100]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            getUserInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/user/ageGroupFind')
                    .then(res=>{
                        this.ageArr=res.data;
                    })
            },
            getAgeSexNumInfo(){
                const menArr=[];
                const womenArr=[];
                const menWomenArr=[];

                axios.get('https://mz.tshe.cn/restauantCH/user/getAgeSexNumInfo')
                    .then(res=>{
                        for(let i=0;i<res.data.length;i++){
                            if(i*3<15){
                                res.data[i*3]
                                menWomenArr.push(res.data[i*3].value+res.data[i*3+1].value)
                            }
                        }
                        //男用户数
                        for(let i=0;i<res.data.length;i++){
                            if(3*i<15){
                                menArr.push(res.data[3*i].value);
                            }
                        }
                        //女用户数
                        for(let i=0;i<res.data.length;i++){
                            if(3*i+1<15){
                                womenArr.push(res.data[3*i+1].value);
                            }
                        }

                        const menArr2=[];
                        const womenArr2=[];
                        for(let i=0;i<menWomenArr.length;i++){
                            menArr2.push({
                                count:menArr[i] * -1,
                                value:((menArr[i]/menWomenArr[i])*100).toFixed(1) * -1
                            })
                        }
                        for(let i=0;i<menWomenArr.length;i++){
                            womenArr2.push({
                                count:womenArr[i],
                                value:((womenArr[i]/menWomenArr[i])*100).toFixed(1)
                            })
                        }
                        console.log(menArr2,'menArr222')
                        console.log(womenArr2,'menArr222')
                        this.menArr1=menArr2;
                        this.womenArr1=womenArr2;
                    })
            },
        },
    }

</script>
