温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue使用echarts时created里拿到的数据无法渲染如何解决

发布时间:2023-03-25 15:01:06 来源:亿速云 阅读:154 作者:iii 栏目:开发技术

这篇文章主要介绍了vue使用echarts时created里拿到的数据无法渲染如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue使用echarts时created里拿到的数据无法渲染如何解决文章都会有所收获,下面我们一起来看看吧。

    使用echarts时created里拿到的数据无法渲染

    问题描述

    在vue里使用echart时,created里请求的数据,但是却无法渲染;

    代码如下:

    //created里获取数据
    async created() {
        const res = await this.$http.get('reports/type/1')
        this.option.legend.data = res.data.data.series.map((item) => item.name)
        console.log('created' + this.option.legend.data)
      },
    //mounted里渲染echart表格
     mounted() {
        let myChart = this.$echarts.init(this.$refs.myEchart)
        this.option && myChart.setOption(this.option)
      },

    原因分析 

    通过vue插件调试,数据确实已经拿到了,但是却无法渲染,数据拿到,但是无法渲染,推断应该是执行顺序出了问题,获取的数据在渲染之后才拿到的。 初步怀疑是await的问题,加入验证代码测试一下:

    async created() {
        const res = await this.$http.get('reports/type/1')
        this.option.legend.data = res.data.data.series.map((item) => item.name)
        //打印1
        console.log(1)
      },
       mounted() {
        let myChart = this.$echarts.init(this.$refs.myEchart)
        this.option && myChart.setOption(this.option)
        //打印2
        console.log(2)
      },

    神奇的一幕出现了,果然和我们想的一样:先执行了mounted()里的函数

    vue使用echarts时created里拿到的数据无法渲染如何解决

    mounted()为什么会打印在created()前面呢?

    让我们来了解一下async/await :await会阻塞其所在表达式中后续表达式的执行(在和await在同一函数内但在await后面的代码会被阻塞,形成类似微任务的存在),但是不会阻碍外部函数的执行!!

    结论:await阻碍了同函数内的代码,整个created函数执行变慢(相当于变成异步),所以mounted先执行,导致数据无法获取;

    解决措施

    将请求放在mounted里

    	//正确代码
      async mounted() {
      	//获取数据
        const res = await this.$http.get('reports/type/1')
        this.option.legend.data = res.data.data.series.map((item) => item.name)
        this.option.series = res.data.data.series
    	//渲染
        let myChart = this.$echarts.init(this.$refs.myEchart)
        this.option && myChart.setOption(this.option)
      },

    echarts报错Cannot read property ‘getAttribute‘ of undefined

    今天在查看项目时,发现控制台莫名报错,Cannot read property 'getAttribute' of undefined

    通过查看,问题定位在这一行,也就是echarts初始化的时候: 

    const chart = echarts.init(this.$refs['chart']);

    结合报错信息可以得知,错误原因是因为没获取到dom属性。

    在vue中获取不到dom一般分为两种情况,一是在created中获取,这个时候只是创建了vue实例,dom并没有开始渲染。所以自然拿不到,如果你是在created中初始化echarts,那么你只需要把初始化的方法放到mounted中执行,因为mounted是dom挂载完成的生命周期。这时候顺理成章就可以取到dom。

    另外一种情况就是v-if导致dom没有渲染,接下来咱们看一下html部分:

    <div >
        <!-- 暂无数据/加载中组件 -->
        <tableLoading border 
            v-if="!conditionBoxLoading && hostAgentNameList.length === 1">
        </tableLoading>
        <!-- echarts -->
        <div ref="chart"  v-else >
        </div>
    </div>

    只需要将v-if / v-else改成v-show就可以了,因为v-if是条件判断是否渲染,v-show是是否显示,所以使用v-show的话即便dom被隐藏,它依然是已经创建完成了,可以获取到。解决方法如下:

    <div >
        <!-- 暂无数据/加载中组件 -->
        <tableLoading border 
            v-show="!conditionBoxLoading && hostAgentNameList.length === 1">
        </tableLoading>
        <!-- echarts -->
        <div ref="chart"  
            v-show="hostAgentNameList.length > 1" >
        </div>
    </div>

    关于“vue使用echarts时created里拿到的数据无法渲染如何解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue使用echarts时created里拿到的数据无法渲染如何解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI