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\');
		})