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

问题描述

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

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

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

解决方法

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

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

results matching ""

    No results matching ""