<template>
  <h2>实时监控仪表盘</h2>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
    >
      <EChartsComponent></EChartsComponent>
    </GridItem>
  </GridLayout>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { GridLayout, GridItem, type Layout } from 'grid-layout-plus'
import EChartsComponent from './components/EChartsComponent.vue';
const layout = reactive<Layout>([
  { x: 0, y: 0, w: 2, h: 2, i: 1 },
  { x: 2, y: 0, w: 2, h: 4, i: 2 }
])
</script>