<template>
    <div :id="'options-count'+id" style="width: 240px;height: 180px;display: inline-block;"></div>
</template>
<script>
    export default {
        data() {
            return {
                id:'',
                optionBar: undefined,
                option: {
                    title: {
                        text: '选项分布',
                        textStyle: {
                            color: 'white'
                        },
                        right: '85',
                        top:'10'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    //legend: {
                    //    data: ['2011年', '2012年']
                    //},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            color:'white'
                        },
                        axisLine: {
                            lineStyle: {
                                color:'white'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C', 'D'],
                        axisLabel: {
                            color:'white'
                        },
                        axisLine: {
                            lineStyle: {
                                color:'white'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: [
                                {
                                    value: 20,
                                    itemStyle: {
                                        color: '#ed4014'
                                    },
                                },
                                {
                                    value: 21,
                                    itemStyle: {
                                        color: '#1cc0f3'
                                    }
                                },
                                {
                                    value: 5,
                                    itemStyle: {
                                        color: '#ed4014'
                                    },
                                },
                                {
                                    value: 1,
                                    itemStyle: {
                                        color: '#ed4014'
                                    },
                                }]
                        }
                    ]
                }
            }
        },
        created() {
            this.id = this.$jsFn.getBtwRandom(0,100000000)
        },
        mounted() {
            this.typeCountPie = this.$echarts.init(document.getElementById('options-count' + this.id))
            this.typeCountPie.setOption(this.option)
        }
    }
</script>
<style scoped lang="less">
    #options-count {
        
    }
</style>
<style>
</style>