先來效果圖展示
展示.png
拖拽尺寸.png
拖拽后.png
移動(dòng).png
組件封裝大家這塊直接復(fù)制使用就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: {
// 布局?jǐn)?shù)據(jù)
layout: {
type: Array,
default: () => []
},
// 是否可拖拽
isDraggable: {
type: Boolean,
default: true
},
// 是否可改變大小
isResizable: {
type: Boolean,
default: true
},
// 多少列
colNum: {
type: Number,
default: 12
},
// 每行得高度
rowHeight: {
type: Number,
default: 30
},
// 是否可鏡像反轉(zhuǎn)
isMirrored: {
type: Boolean,
default: false
},
// 標(biāo)識(shí)布局是否垂直壓縮
verticalCompact: {
type: Boolean,
default: true
},
// 定義柵格中的元素邊距
margin: {
type: Array,
default: () => [10,10]
},
// 標(biāo)識(shí)是否使用CSS屬性 transition-property: transform;
useCssTransforms: {
type: Boolean,
default: true
},
// 是否使用動(dòng)態(tài)鼠標(biāo)指針樣式
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>
組件的調(diào)用（主要是使用這塊 上面的直接復(fù)制即可）
<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: "最近一次測(cè)試",
label_id: 5,
subtext: "99.99%",
text: "圖標(biāo)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: "最近二次測(cè)試",
label_id: 5,
subtext: "99.99%",
text: "圖標(biāo)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: "最近三次測(cè)試",
label_id: 5,
subtext: "99.99%",
text: "圖標(biāo)3",
xData: [810, 377, 342, 286, 274, 219, 190, 199, 174, 147, 146, 438, 171, 162],
yData: ["廣東省", "江蘇省", "北京市", "浙江省", "山東省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "遼寧省"],
}
},
]
}
},
methods: {
// 拖拽之后觸發(fā)
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組件,后續(xù)我會(huì)更新，你只需講chart組件換為你自己封裝的組件 其中#chart為插槽參數(shù) （其實(shí)就是每塊的數(shù)據(jù)）layout變量為grid的核心數(shù)據(jù),分別代表x軸坐標(biāo)y軸坐標(biāo)寬度和高度其中data為你需要渲染的數(shù)據(jù) 還不能使用的 直接評(píng)論區(qū)見
