先来效果图展示

展示.png
拖拽尺寸.png
拖拽后.png
移动.png

组件封装大家这块直接复制使用就OK

<template>
    <grid-layout
            :layout="layout"
            :col-num="colNum"
            :row-height="rowHeight"
            :is-mirrored="isMirrored"
            :vertical-compact="verticalCompact"
            :margin="margin"
            :use-css-transforms="useCssTransforms"
            :useStyleCursor="useStyleCursor"
            :is-draggable="isDraggable"
            :is-resizable="isResizable"
            @layout-updated="layoutUpdatedEvent"
    >
        <grid-item v-for="(item, index) in layout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :minW="minW"
            :minH="minH"
            :key="index"
            @resized="resize(item.i)">
            <slot name="chart" :item="item" :index="index"></slot>
        </grid-item>
    </grid-layout>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
// import Chart from "@/components/chart/index.vue";
export default {
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem,
        // Chart
    },
    props: {
        // 布局数据
        layout: {
            type: Array,
            default: () => []
        },
        // 是否可拖拽
        isDraggable: {
            type: Boolean,
            default: true
        },
        // 是否可改变大小
        isResizable: {
            type: Boolean,
            default: true
        },
        // 多少列
        colNum: {
            type: Number,
            default: 12
        },
        // 每行得高度
        rowHeight: {
            type: Number,
            default: 30
        },
        // 是否可镜像反转
        isMirrored: {
            type: Boolean,
            default: false
        },
        // 标识布局是否垂直压缩
        verticalCompact: {
            type: Boolean,
            default: true
        },
        // 定义栅格中的元素边距
        margin: {
            type: Array,
            default: () => [10,10]
        },
        // 标识是否使用CSS属性 transition-property: transform;
        useCssTransforms: {
            type: Boolean,
            default: true
        },
        // 是否使用动态鼠标指针样式
        useStyleCursor: {
            type: Boolean,
            default: true
        },
        // 元素最小宽
        minW: {
            type: Number,
            default: 1
        },
        // 最小高
        minH: {
            type: Number,
            default: 1
        },
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            height: '',
            option: {},
            gridShow: false
        }
    },
    methods: {
        layoutUpdatedEvent(newLayout) {
            this.$emit('layoutUpdatedEvent',newLayout)
        },
        // 更新resize
        resize(i) {
            this.$emit('resize',i)
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    height: 100%;
}
</style>

组件的调用（主要是使用这块 上面的直接复制即可）

<template>
    <div>
        <gridCanvas :layout="layout" @layoutUpdatedEvent="layoutUpdatedEvent" @resize="resize">
            <template #chart="{item,index}">
                <el-card v-if="show" ref="elCard" style="height: 100%" :key="item.i">
                    <Chart :ref="'echarts'+item.i" :chartsData="item.data" :radioShow="false" :height="'100%'" :id="index"></Chart>
                </el-card>
            </template>
        </gridCanvas>
    </div>
</template>

<script>
import gridCanvas from "@/components/gridCanvas/index.vue";
import Chart from "@/components/chart/index.vue";
export default {
    components: {
        gridCanvas,
        Chart
    },
    data() {
        return {
            show: false,
            layout: [
                {"x":0,"y":0,"w":6,"h":10,"i":"0",
                    data: {
                        descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                        dis_type: "barh",
                        label_desc: "最近一次测试",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "图标1",
                        xData: [2211, 333, 372, 226, 248, 218, 103, 199, 174, 177, 146, 148, 171, 162],
                        yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                    }
                },
                {"x":4,"y":0,"w":4,"h":8,"i":"1",
                    data: {
                        descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                        dis_type: "pie",
                        label_desc: "最近二次测试",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "图标2",
                        xData: [810, 357, 372, 226, 248, 218, 193, 189, 174, 477, 146, 148, 131, 162],
                        yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                    }
                },
                {"x":0,"y":5,"w":4,"h":8,"i":"6",
                    data: {
                        descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                        dis_type: "bar",
                        label_desc: "最近三次测试",
                        label_id: 5,
                        subtext: "99.99%",
                        text: "图标3",
                        xData: [810, 377, 342, 286, 274, 219, 190, 199, 174, 147, 146, 438, 171, 162],
                        yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
                    }
                },
            ]
        }
    },
    methods: {
        // 拖拽之后触发
        layoutUpdatedEvent(newLayout) {
            console.log(newLayout)
        },
        resize(i) {
            this.$nextTick(() => {
                const chart = eval(`this.$refs.echarts${i}`)
                if(chart) {
                    chart.resize()
                }
            })
        }
    },
    mounted() {
        setTimeout(() => {
            this.show = true
        })
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    height: 100%;
}
</style>

使用讲解

直接引用我们自己封装的组件 代码中chart组件为我自己封装的echarts组件,后续我会更新，你只需讲chart组件换为你自己封装的组件 其中#chart为插槽参数 （其实就是每块的数据）layout变量为grid的核心数据,分别代表x轴坐标y轴坐标宽度和高度其中data为你需要渲染的数据 还不能使用的 直接评论区见