【vue.js】关于封装 echarts 时，实现图表根据input 输入值实时变化大小

需求是这样的：
父组件修改 input 输入框值，传递给子组件的折线图，使折线图的宽或高变为我们输入的值。

父组件：

  <LineChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%'}"
          :theme="custheme"
    ></LineChartBlock>

blockitem 为我循环列表里的一个子项，这个子项会包含宽度等信息

子组件：

<div>
  <ve-line
      :data="blockdata"
      width="100%"
      height="100%"
      :settings="chartSettings"
      :theme="theme"
      :judge-width="true"
      :after-config="afterConfig"
    ></ve-line>
</div>

一开始我的想法是这样的：
子组件的宽度为父组件的 100%，那么当父组件的宽度发生变化，子组件的宽度会自适应为 100%

但结果并不是这样的
经过一番研究，我总结了以下注意点

1. :judge-width="true"属性一定不能少，而且一定要为 true

配置项	简介	类型	默认值
judge-width	是否处理生成图表时的宽度问题	boolean	false

也就是说，这个属性规定了图表宽高是否可自适应
如果出现父组件宽度变化，图表宽度仍不变，需要先注意这一点。
（但是经本人实践，judge-width属性似乎会拦截图表的动画效果，不知道各位小集美有没有什么解决方法）

如果设置了 judge-width 的属性，还是没办法实现效果

2.手动传递宽度参数，watch 监听此参数并刷新图表
父组件：

  <LineChartBlock
          :style="{width:(blockitem.width*100)+'%',height:'100%'}"
          :theme="custheme"
          :changesizewidth="blockitem.width"
    ></LineChartBlock>

子组件：

<div>
  <ve-line
      ...
      ref="mychart"
      :judge-width="true"
      ...
    ></ve-line>
</div>

...

  watch: {
     changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    }
  }

这样一来，子组件只要监听到父组件宽度的变化，通过 ref 获取 dom 元素进行强制刷新，就能跟随父组件的宽度实时变化了。