<template>
    <div id="teach-method"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    data() {
        return {
            teachMethod: undefined,
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    top: '20px',
                    bottom: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        color: 'white',
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#403f44'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#403f44'
                        },
                        interval: 2
                    }
                },
                yAxis: {
                    splitArea: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#403f44'
                        },
                        interval: 0
                    },
                    type: 'category',
                    data: [
                        this.$t('home.col1'),
                        this.$t('home.col2'),
                        this.$t('home.col3'),
                        this.$t('home.col4'),
                        this.$t('home.col5'),
                        this.$t('home.col6')
                    ],
                    axisLabel: {
                        color: '#DDDDDD'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#403f44'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 15,
                        data: [
                            {
                                value: 20,
                                itemStyle: {
                                    color: '#daba63'
                                },
                            },
                            {
                                value: 18,
                                itemStyle: {
                                    color: '#b8a0dc'
                                }
                            },
                            {
                                value: 5,
                                itemStyle: {
                                    color: '#65dcda'
                                },
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: '#d658a2'
                                },
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: '#d77c35'
                                },
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: '#07d280'
                                },
                            }]
                    }
                ]
            }
        }
    },
    mounted() {
        this.typeCountPie = this.$echarts.init(document.getElementById('teach-method'))
        this.typeCountPie.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("teach-method"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.typeCountPie.resize()
            })
        })
    }
}
</script>
<style lang="less" scoped>
</style>
<style lang="less">
#teach-method {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
}
</style>