今天在el-tabs使用ECharts时,发现个问题,在不同tab页绘制不同的图表,默认tab页显示的图表,显示正常,但切换到其他tab标签,其他的图表显示错误,像下面这样在el-tabs中使用ECharts图表,切换tab时,图表显示错乱_vue

在el-tabs中使用ECharts图表,切换tab时,图表显示错乱_vue_02

其实原因就是切换选项卡时,el-tabs使用的是display来控制的,这个属性会使ECharts无法获取容器宽度导致显示错误。解决这个问题有两种方法:

  1. 使用固定宽高 (找到你要绘制图表的div,设置width和height)
  2. 切换tab页时,使用v-if做判断,并重新渲染图表;

在el-tabs中使用ECharts图表,切换tab时,图表显示错乱_vue_03

可以使用nextTick也可以使用setTimeout

在el-tabs中使用ECharts图表,切换tab时,图表显示错乱_element-plus_04

在el-tabs中使用ECharts图表,切换tab时,图表显示错乱_echarts_05