vue-echarts解决自适应和初始宽度超出问题（去坑精华版）

最新推荐文章于 2023-05-26 13:37:17 发布

盏茶作酒

最新推荐文章于 2023-05-26 13:37:17 发布

阅读量2.5k

点赞数 1

文章标签： echarts自适应宽度

原文链接：https://blog.csdn.net/weixin_44000275/article/details/106070234

版权

前言

自适应这个东西整了一下午，感觉网上的东西有很多坑，这里记录一下

技术

1.vue-echarts

这里用的vue与echarts结合的组件化的东西

代码

1.页面

    <v-chart
      :options="orgOptions"
      style="width: 100%;height:100%;"
      :auto-resize="true"
      ref="chart"
    />

这里的style是必须的，意思是填充上一层盒子
ref也是必要的，后面回用到这里。
2.js–mounted
1)初始时适应

    this.$nextTick(() => {
       this.$refs.chart.resize();
      })

this.$refs.chart.resize()这个是官网给的自适应方法，
这里的核心是$nextTick,页面渲染完成后执行这个自适应函数
2）窗口变化时适应

window.addEventListener("resize", this.resizeTheChart);//这句在mounted中

methods中：

 resizeTheChart() {
      if (this.$refs && this.$refs.echarts1) {
        this.$refs.echarts1.resize();
      }

这里时给窗口添加自适应函数监听，有了这句改变屏幕大小时，画布也会随着改变。

总结

网上给的自适应解决方案全都是只给出了窗口自适应的问题，事实上也能解决窗口自适应，但是第一次渲染的时候会出现不适应的问题，这就要用nextTick去解决。
查了一下，这个下载的vue-echarts他给的默认长宽是600px*400px，如果外等盒子的长宽比这个小的话那么就会超出，而这个自适应函数本身是解决这个问题的，但是它貌似是异步的，如果只单单在mounted中写一次，那它会在画布生成前执行一次，就不能达到想要的效果。
说完了，有点绕，不懂的留言吧