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

港控/mmm° 2023-10-11 15:09 3阅读 0赞

### 前言 ###

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

### 技术 ###

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中写一次，那它会在画布生成前执行一次，就不能达到想要的效果。  
说完了，有点绕，不懂的留言吧

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 Typora设置文字颜色和自适应宽度

Typora设置文字颜色 Typora本身并不支持选择颜色进行内容的设置，但可以使用其现有的功能实现对文本内容进行颜色的设置，此处以使用内联公式方式进行颜色字体的设置。

梦里梦外;/ 2024年03月23日 10:33/ 0 赞/ 82 阅读

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

前言自适应这个东西整了一下午，感觉网上的东西有很多坑，这里记录一下技术 1.vue-echarts 这里用的vue与echarts结合的组件化的东西

港控/mmm°/ 2023年10月11日 15:09/ 0 赞/ 4 阅读

相关 UICollectionViewCell自适应宽度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

水深无声/ 2023年02月28日 00:59/ 0 赞/ 25 阅读

相关 android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应

为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待

柔光的暖阳◎/ 2022年10月16日 00:43/ 0 赞/ 524 阅读

相关 iframe的宽度和高度自适应

$(function(){ $("调整的iframe").attr("width",(document.body.offsetWidth - 100)

柔光的暖阳◎/ 2022年06月18日 08:10/ 0 赞/ 278 阅读

相关 BFC宽度自适应布局

BFC：块级格式化上下文，它指的是一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

冷不防/ 2022年06月11日 05:55/ 0 赞/ 339 阅读

相关 textarea 自适应宽度和高度

场景分析解决场景经常与遇到处理文字域的问题, 需要继承父级的宽度分析 `te

「爱情、让人受尽委屈。」/ 2022年05月18日 08:20/ 0 赞/ 455 阅读

相关 div自适应宽度

.item\_sel\{ min-width: 141px; width: auto; \_width:141px; white

小灰灰/ 2022年05月16日 05:37/ 0 赞/ 412 阅读

相关 div宽度自适应

自适应宽度的层不要指定宽度和float属性自适应宽度的层物理的位置放在最下面自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象

r囧r小猫/ 2022年05月15日 14:47/ 0 赞/ 353 阅读

相关 textarea 自适应宽度和高度

css样式： .textarea-inherit { width: 100%; overflow: auto; wor

悠悠/ 2021年11月22日 13:08/ 2 赞/ 523 阅读