<div :id="id"></div>
</template>
<script>
import echarts from 'echarts'

export default {
    data () {
        return {
            charts: ''
        }
    },
    props:["id","opinion","opinionData"],
    mounted(){
        this.$nextTick(function() {
            this.drawPie(this.id)
            
        })
        let _this=this;
       window.addEventListener("resize",function () {
             _this.charts.resize();
        })
    },
    methods:{
        drawPie(id){
            this.charts = echarts.init(document.getElementById(id))
           for(var i = 0;i<this.opinionData.length;i++){//修改數(shù)據(jù)  每一條添加一個(gè)type:'bar'
                   this.opinionData[i] = {
                                   type :'bar',
                                   data:this.opinionData[i].data,
                                   name:this.opinionData[i].name
                               }
           }
           this.charts.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                        type : 'shadow'        // 默認(rèn)為直線，可選為：'line' | 'shadow'
                    }
                },
                legend: {
                    data:this.opinion
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : this.opinionData
            })
        }
    }
    
}

</script>
<style scoped>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

</style>