
<style>
.sexChart{
    height: 100%;
}
</style>
<template>
  <div class="sexChart" ref="sexChart">
    
  </div>
</template>
<script>
export default {
    props: ["myData", "strArr"],    
    data() {
        return {
        
        };
    },watch:{
        
    },
    mounted() {
        this.init()
        let myChart = this.$echarts.init(this.$refs.sexChart);
        window.addEventListener("resize", () => { 
            myChart.resize();  
        });
    },
    methods: {
        init(){
            let myChart = this.$echarts.init(this.$refs.sexChart);
            let option = {
                grid: {
                    left: '50',
                    right: '3%'
                },
                xAxis: {
                    data: this.strArr,
                    type: 'category',
                    axisLabel: {
                        color: '#FFFFFF'
                    },
                    axisLine: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        formatter: '{value} %'
                    },
                    max: 100,
                },
                series: [{
                    data: this.myData,
                    type: 'bar',
                    itemStyle: {
                        color: '#FFA475',
                    },
                    barWidth: '44'
                }]
            };
            myChart.setOption(option);
        }
    }
}
</script>