vue中echarts自适应不起作用是为啥

<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++){//修改数据  每一条添加一个type:'bar'
                   this.opinionData[i] = {
                                   type :'bar',
                                   data:this.opinionData[i].data,
                                   name:this.opinionData[i].name
                               }
           }
           this.charts.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'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>

阅读 6.2k
1 个回答

宽度设置100%,在图标下面加上
this.myChart.setOption(option);
window.onresize = this.myChart.resize;即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题