<template>
    <div>
        <div>
            <div id="main2" :style="{width: '750px', height: '240px'}"></div>
        </div>
    </div>
</template>

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

    export default {
        name: 'Echarts',
        props: {
            //数据
            data: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data(){
            return{
                msg: 'Welcome to Your Vue.js App',
                ageArr:[],
                menProportion:'',
                womenProportion:'',
            };
        },
        created(){
            this.getUserInfo();
            this.getAgeSexInfo();
        },
        mounted(){
            let that = this;
            setTimeout(function () {
                that.myEcharts2();
            },200)

        },
        methods:{
            myEcharts2(){
                var img2 = {
                    a:
                        "data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAlCAMAAACXrSJOAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABlVBMVEUWYMYWYsgWZcoWaM0Wa9AXb9MXc9cZjO4ZkPIZk/UZl/iAgIAXd9sYe98Yf+IYg+YYiOoXd9sYe98Yf+IYg+YYiOoXc9cYiOoZjO4Xb9MZjO4Xb9MZjO4Xb9MZjO4Xb9MZjO4Xb9MXc9cYiOoZjO4Xc9cXd9sYe98Yf+IYg+YYiOoWaM0Wa9AXb9MXc9cXd9sYf+IYg+YYiOoZjO4ZkPIZk/UWaM0Zk/UWZcoWaM0Zl/gWZcoZl/gWZcoZl/gWYsgWZcoamvsWYsgamvsWYsgamvsWYMYWYsgamvsanP0WYMYanP0WYMYanP0WYMYWaM0Wa9AZk/UanP0anv8WYMYWaM0Wa9AZk/Uanv8WYMYWYsgWZcoWaM0Zk/UZl/gamvsanP0Ye98Yf+IYe98Yf+IYf+IYf+IZk/UWa9AYe98Yf+IZkPIWa9AXb9MXc9cXd9sYe98Yg+YYiOoZjO4ZkPIXd9sYe98Yf+IYg+YXc9cYiOoWa9AXb9MZjO4ZkPIZk/UWaM0Zl/gWZcoWYsgamvsanP3////j6Ca2AAAAdXRSTlMAAAAAAAAAAAAAAAAAAAAAADaIj04BebMFNniO0J/ia6sJ0/EpE57w97csHb7g7vDw8PDvzTafzAfxI012nsgF7htIbZm9A+r9E0Njk7PiweW3+Qz7XuBJIH34twQQk/ukuqeggH9wDbVwR9kkyvufBov01TdkiR8XAAAAAWJLR0SGjN47XQAAAAd0SU1FB+QCDAwCLQ/k2H8AAAEFSURBVCjPY2BgZGJmYWUTFBIWEWXn4OTi5uZmgIiJlZaVV4hLIItJVoLEqqSQxaQhYjLIYrIQMTlkMXmImAKymKISSExZBcVeVTV1DU0tVLew8fDy8QsgiWnr6OrpqxsYGhmbmMLEzKprIHbU1plDxSwsEWL1VhAx6wYkMRuImC2ymB1YzN4BWazRESTm1IQi5gwSc0EVcwWKubmjinl4cjN4NaOKtXhzM/igi/lyM/g1N/kHwMUCG1uCghlCmptCw+Bi4Y0trREMkVHRMQix2Lj4BEhYIYnBww+XWGISplhyCh3EUrGIpZEilg4XywCKZWYBxbIR6SUnNy+/gK+wqLgELAYAyE67gYzoRY0AAAAASUVORK5CYII="
                };
                var img1 = {
                    a:
                        "data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAMAAAB1cTk3AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABy1BMVEXpgADqggHqgwHrhgLsiAPtiwTujgX0oAv1pAz2pg2AgIDvkQbwlAfxlwjymgnznQrvkQbwlAfxlwjymgnznQrujgXvkQbznQr0oAvtiwTujgX0oAvtiwT0oAv1pAztiwT1pAztiwT0oAv1pAztiwTujgX0oAvujgXvkQbwlAfxlwjymgnznQrsiAPtiwTujgXvkQbwlAfxlwjymgnznQr0oAv1pAz2pg3rhgLsiAP2pg3rhgL3qQ7qgwHrhgL3qQ7qgwH3qQ74qw/qgwH4qw/qggH4qw/qggH5rhDpgADqggH5rhDpgAD5rhD5sBDpgADpgAD5sBDpgAD5sBDpgADqgwH3qQ75sBDpgADpgADqggHqgwH3qQ74qw/5rhD5sBDqgwH3qQ74qw/qgwH4qw/qgwH4qw/qgwH4qw/qgwHrhgLsiAPtiwTxlwj1pAz2pg33qQ74qw/tiwTxlwjtiwTxlwj1pAztiwTtiwTwlAfwlAfxlwj0oAv1pAztiwTujgXvkQbwlAfxlwjymgnznQr0oAvwlAfxlwjymgnvkQbznQrujgX0oAvtiwT1pAzsiAP2pg3rhgL3qQ7qgwH4qw/qggH5rhDpgAD////+ISlpAAAAhnRSTlMAAAAAAAAAAAAAAAAAAAAAKoKTYAdi/NYZJPy0e/4RjSBW5wMDw1cLjur7ykg+wNDQ0NDX4ODJMg7uvnAoAt+QUPALv2Qtzpw3E/ehefgTBOR0Tdti+u31C6TRatKG4l9I+gR1KJlSqlw6j5/q8cOghA2VhJCAEJ2g/uRx+QYr4vVrHNj6gqKB9EUAAAABYktHRJh20QY+AAAAB3RJTUUH5AIMDzc6LEAhVwAAASVJREFUKM+d0lVXAmEQBuDPQrGwG8UWuxPF7hbF7i6wuwuxlfi7jvvt2TOz6I1z+VxMnHkZY27uHp5eiqDgkNAwbx+lLxQTMTzi/sESGUUwOuYR0BpLMO5JQHU8xgSOzxqMiRyTkjGmpAqYRqenZ2gzs7JlKyn8/AMCVQRzcvPyCwqLiktKyyQsr3gRp79WSlj1JuG7TsTqGoR6EWs/ENbVc2zA+NkoYNMXwWYBWyjaWgHb2mXYAdhpl2FXN+vplaOjj/U7XXCAGZz2QYxDNoeRDY+MjmEcn5ic+ll+GuPMLL9ojvSc57hAcJHjEsFljiura+uAG4CbJvOW9KNtwB1AEoZdwD3A/f/hwW94+AceuSBE8fjEYj09w3h+cXl1fXN7x7P0DR0C2VhexWPzAAAAAElFTkSuQmCC"
                };
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main2'));

                let option = {
                    grid: {
                        left: "0%",
                        top: "7.5%",
                        bottom: "25%",
                        width: "55%"
                    },
                    tooltip: {
                    },
                    xAxis: {
                        max: 100,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        [
                            {
                                type: "category",
                                inverse: false,
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    margin: 0,
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 16
                                    }
                                }
                            }
                            ],
                        series: [
                            {
                                type: "pictorialBar",
                                symbolRepeat: "fixed",
                                symbolMargin: "35%",
                                symbolClip: true,
                                symbolSize: [28,45],//图片大小
                                symbolPosition: "start",
                                symbolOffset: [0, 0],
                                data: [
                                    {//女
                                        value: this.womenProportion,
                                        symbol: "image://" + img1.a,
                                        itemStyle: {
                                            normal: {
                                                color: "#fff"
                                            }
                                        }
                                    },
                                    {//男
                                        value: this.menProportion,
                                        symbol: "image://" + img2.a
                                    }
                                ],
                                z: 10
                            },
                            {
                                type: "pictorialBar",
                                itemStyle: {
                                    normal: {
                                        opacity: 0.3
                                    }
                                },
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                animationDuration: 0,
                                symbolRepeat: "fixed",
                                symbolMargin: "35%",
                                symbolSize: [28,45],
                                symbolPosition: "start",
                                symbolOffset: [0, 0],
                                data: [
                                    {
                                        value: 100,
                                        symbol: "image://" + img1.a
                                    },
                                    {
                                        value: 100,
                                        symbol: "image://" + img2.a
                                    }
                                ],
                                z: 5
                            }
                            ]
                };
                // 使用刚指定的配置项和数据显示图表。
                window.addEventListener("resize", function() {
                    myChart.resize();
                });

                myChart.setOption(option);
            },
            getUserInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/user/ageGroupFind')
                    .then(res=>{
                        this.ageArr=res.data;
                    })
            },
            getAgeSexInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/user/getAgeSexInfo')
                    .then(res=>{
                        res.data.forEach(item=>{
                            if(item.sex=="男"){
                                const A=JSON.stringify(item.proportion).toString();
                                const B=A.substring(1,A.length-2);
                                this.menProportion=Number(B);
                            }
                            if(item.sex=="女"){
                                const A=JSON.stringify(item.proportion).toString();
                                const B=A.substring(1,A.length-2);
                                this.womenProportion=Number(B);
                            }

                        })
                    })
            }
        }
    }

</script>
