关于Echarts在某种情况下resize方法不生效时，解决办法

在前端保卫头发

于 2021-12-01 10:45:24 发布

阅读量3.6k

点赞数 5

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_58147586/article/details/121649904

版权

这篇博客分享了如何解决Echarts图表在resize时无法自适应屏幕的问题。通过添加特定的CSS样式，确保Echarts容器及内部元素的宽度和高度为100%，实现了图表的自适应布局。这种方法在项目中得到了应用，有效解决了自适应问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇分享，我们留了一个结尾，就是resize方法不生效导致我们的Echarts，不能随着我们的屏幕自适应，解决方法如下：

<style lang="scss" scoped>
::v-deep.echarts {
  width: 100%;
  height: 100%;
  div {
    &:nth-child(1) {
      width: 100% !important;
      height: 100% !important;
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}
</style>

在我项目中用这个解决了当时项目的自适应问题，性价比挺高的，有更好方法的大佬可以私我，储存储存哈哈哈