
<style>
.sexChart{
    height: 100%;
}
</style>
<template>
  <div class="sexChart" ref="sexChart">
    
  </div>
</template>
<script>
export default {
    props: ["chartData", "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: '10%',
                    right: '5%'
                },
                xAxis: {
                    data: this.strArr,
                    type: 'category',
                    axisLabel: {
                        color: '#333333'
                    },
                    axisLine: {
                        show: false
                    },
                    boundaryGap : false,
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#969696',
                        formatter: '{value} %'
                    },
                    max: 100,
                },
                series: [{
                    data: this.chartData,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#FFA475',
                    },
                    barWidth: '44',
                    areaStyle: {
                        normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgba(255, 164, 117, 1)" },
                            { offset: .8, color: "rgba(255, 164, 117, 0)" }
                        ])
                        }
                    },

                }]
            };
            myChart.setOption(option);
        }
    }
}
</script>