关于vue-grid-layout vue 可拖拽缩放组件的使用 已经 vue-grid-layout和echarts结合的用法

关于vue-gird-layout 的使用方法规范

<grid-layout
            // 网格初始化布局  数组       必填  每一项都必须具有i、x、y、w和h属性
            :layout.sync="layout"  
            
            // 表示网格有多少列 number 类型    非必填    默认为12
            :col-num="12" 
            
            // 表示一行的高度(以像素为单位) 数字     非必填     默认值为150
            :row-height="30" 
            // 表示网格中最大行数 数字          非必填     默认为无穷大
           :maxRows="20"
            // 表示网格项数是否可以拖动 Boolean类型        非必填     默认为true
            :is-draggable="true"
            // 表示网格是否可以改变带大小 Boolean      非必填     默认为true
            :is-resizable="true"
            
            // RTL/LTR 的转换 Boolean      非必填 默认为false
            :is-mirrored="false"
            
            // 容器是否适应内部变化 Boolean  非必填 默认为 true
           :autoSize="ture" 
           
            // 垂直方向上 是否应该紧凑布局 Boolean 非必填 默认为true
            :vertical-compact="true"
            
        // 网格之间的边距 两个数字组成的数组 第一个数字为水品距离 第二个为垂直距离 非必填 默认值为 [10,10]
            :margin="[10, 10]"
            
            // 是否使用css的transforms来排版 非必填 为false时 使用后采用定位方式来布局 默认为true
            :use-css-transforms="true"  
            
            // 布局是否应响应窗口宽度 非必填 默认false 为true时 建议不要使用 会引起布局紊乱
           :responsive="false" 
           
           //布局是否应响应为响应布局定义的窗口宽度断点 对象类型 非必填 默认值
            // { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
           :breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
           // 定义每个断点的列数
           :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }"
            // 生命周期
            
           @layout-created="layoutCreatedEvent"  // 布局创建事件
            @layout-before-mount="layoutBeforeMountEvent" // 布局安装以前事件
            @layout-mounted="layoutMountedEvent"    // 布局安装事件
            @layout-ready="layoutReadyEvent"    // 布