解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

  • 问题展示
    • 解决问题后的展示
      • 图片描述
      • 问题描述
      • 问题解决

问题展示

解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应_第1张图片
解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应_第2张图片

解决问题后的展示

解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应_第3张图片

图片描述

如图所示我通过设置两个并列展示的echarts,每个echarts宽度设置为50%宽度自适应,最后一张图为正常展示效果。

问题描述

在vue使用echarts时我们一般喜欢在created、mounted中直接调用echarts数据初始化,还有在我们给echarts设定宽度时(一定要设置固定像素)才能展示,不能通过百分比来自适应,(高度需要给固定高度,个人比较喜欢用vh定义高度)

问题解决

在vue初始化echarts数据时,一定不能在created、mounted中定义初始化方法,使用vue的$nextTick也无效,个人通过点击事件初始化数据,可以展示正常的echarts,正常效果如下图:
解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应_第4张图片

你可能感兴趣的:(echarts,vue)