vue弹框echarts报错Cannot read property 'getAttribute' of undefined

慌慌.zz

于 2019-06-28 18:52:00 发布

阅读量1.4w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Liberal_w/article/details/94032964

vue 专栏收录该内容

11 篇文章

订阅专栏

本文解决了ECharts图标未及时加载的问题，通过调整drawPieChart方法的调用时机，将其从updated生命周期钩子移至数据请求方法中，利用Vue的$nextTick确保DOM更新后图表正确初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要的问题是echars图标还没出来，数据现出来了（已经解决）


<script>
    import echarts from 'echarts'

export default {
    methods: {
        drawPieChart(){
                let echa = this.$refs.echa;
                this.mychartPie = echarts.init(echa);
                this.mychartPie.setOption({
                    title: {
                        text: '问题:'+this.editaForm.question,
                        x: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一','二','三']//x轴名称
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [22,22,22],//y轴数量
                        type: 'bar'
                    }]
                });
            }
    },
    updated: function () {
            this.drawPieChart();
        },
        mounted:function () {
            this.$nextTick(function () {
                this.drawPieChart();
            });
        }
}
</script>

解决方法：

<div style="background-color:#000;">
不需要挂载到updated
updated: function () {
            this.drawPieChart();
        },

直接把这个写到数据请求的方法中：
            this.$nextTick(function () {
                this.drawPieChart();
            });
   </div>