<template>
    <div id="teach-method"></div>
</template>
<script>
    export default {
        data() {
            return {
                teachMethod: undefined,
                option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        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: ['小组学习', '多元评价', '个人学习', '生本决策','全班互动','全班测验'],
                        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)
        }
    }
</script>
<style lang="less" scoped>
</style>
<style lang="less">
    #teach-method {
        width: 100%;
        height: 280px;
        display: flex;
        justify-content: center;
    }
</style>