VUE+echarts图表展示宽度不正确的解决方法（flex+echarts）

请叫我雯子小姐的小爷

于 2021-10-14 10:39:40 发布

阅读量1.9k

点赞数

分类专栏： VUE 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/m0_49475727/article/details/120758948

版权

2 篇文章 0 订阅

订阅专栏

问题描述

在VUE中使用ercharts时，如果在DOM没有渲染完成时就初始化了echarts，则会导致图表的宽度溢出。正确的做法是先渲染数据后渲染DOM。社区有很多方法可以解决这个问题，比如说使用this.$nextTick()：

this.$nextTick(() => {
    // 先进行数据请求
    this.netRequest();
    // 再进行DOM渲染
    this.initCharts();
})

但是如果项目已经搭建，修改流程太麻烦，这里介绍一种简便的修复方法：

在setoption之前需要先调用resize()方法，如下：

that.charts.versionChart.resize();
that.charts.versionChart.setOption({})

下面是我们自己运营的微信小程序“但行趣事”和公众号“但行趣事”，更多的技术文章以及视频我会放到小程序和公众号当中，有志同道合的小伙伴也可以在小程序(联系客服按钮)或者公众号(直接留言)当中联系我们

但行趣事小程序

但行趣事公众号

关注