vue中使用echarts时 将echarts做响应式

子组件： Echartsline

<template>
  <div :style="{width:childWidth,height:childHeight}" class="line-wrap">
    <!--echarts 带面积的折线图-->
    <div id="elines" :style="{width:childWidth,height:childHeight}" ref="odiv"></div>
  </div>
</template>

 props:{
          lineData:Object,
          isClick:Boolean
        },
data:function () {
          return {
            lineCharts:'',
            childWidth:'',
            childHeight:''
          }
        },
//--在watch中监听 宽高变化   
//（宽高有变化的时候会触发watch  然后跟新视图，由于父组件直接传过来的数据不能直接更新子组件视图，
//    所以在子组件用一个新的变量去接收父组件传递过来的参数）
		watch:{
	          lineData:{
	            deep:true,
	            handler(newVla,old){
	              this.childWidth = newVla.divOffset.eWidth;
	              this.childHeight = newVla.divOffset.eHeight;
	              this.initChart(newVla.options,this.isClick);
	            }
	          }
       	 },
       	 
//--在methods中添加方法 

		initChart(options,isClick){
              const _this = this;
              const linesDiv = document.getElementById('elines');
              linesDiv.style.width = this.childWidth;
              linesDiv.style.height = this.childHeight;

              this.$nextTick(()=>{
                _this.lineCharts = _this.$echarts.init(linesDiv);
                _this.lineCharts.setOption(options);

                //--支持点击事件
                if(isClick){
                  _this.lineCharts.on('click',function (params) {
                    const index = params.dataIndex；
                    _this.$emit('clickFn',index);
                  })
                }
                _this.lineCharts.resize();
              })
            }
//------离开页面  注销echarts
		destroyed:function () {
          const _this = this;
          if(_this.lineCharts!==''){
            _this.lineCharts.dispose();
          }
        }

父组件 Parent

//----使用栅格布局  响应式
		<el-col  :sm="24" :md="24" :lg="24" :xl="24" class="first-item">
            <div class="panel-loading-icon" v-show="showLoadingPanel[3]"></div>
	            <div class="tendency panel_content_wrap" style="width: 100%" ref="chartBoxRef" id="ptrendDiv">
	            	 <Echartsline  :lineData="lineData" :isClick="true" @clickFn="trendChartClick"></Echartsline>
	              </div>
            </div>
          </el-col>
//----在data中定义变量
		lineData:{         // 传递给子组件的 数据 + 宽高
	          options:{},
	          divOffset:{
	            eWidth:'',
	            eHeight:''
	          }
	        },
//----在mounted中 使用window.onresize函数     （_throttle函数是节流函数）
		this.$nextTick(()=>{
	        window.onresize = _throttle(function () {
	          Vue.set(_this.lineData.divOffset,'eWidth',(_this.$refs.chartBoxRef.offsetWidth-15) +'px');
	          Vue.set(_this.lineData.divOffset,'eHeight',(_this.$refs.chartBoxRef.offsetHeight-25) +'px');
	        },200);
	      });

//------axios获取到数据后  更新子组件视图
	axios.get(url).then((res)=>{
		Vue.set(this.lineData,'options'，{ echarts数据 })
		 Vue.set(this.lineData.divOffset,'eWidth',(this.$refs.chartBoxRef.offsetWidth-15) +'px');
              		Vue.set(this.lineData.divOffset,'eHeight',(this.$refs.chartBoxRef.offsetHeight-25) +'px');
		})