<template>
  <div class="container">
    <!-- 數(shù)據(jù)大屏展示內(nèi)容區(qū)域 -->
    <div class="screen" ref="screen">
      <!-- 第一行：展示標(biāo)題 -->
      <div class="title">
        <div class="title-divide title-left">標(biāo)題左側(cè)</div>
        <div class="title-divide title-center">標(biāo)題</div>
        <div class="title-divide title-right">標(biāo)題右側(cè)</div>
      </div>
      <!-- 第二行：展示圖表數(shù)據(jù) -->
      <div class="body">
        <!-- 該行的最外層分了三列，寬度比例是：3:4:3。 -->
        <!-- 一行三列 -->
        <div class="body-left">
          <!-- 在body-left塊中垂直方向上均等分了三小塊 -->
          <div class="body-left-top">圖表1</div>
          <div class="body-left-middle">圖表2</div>
          <div class="body-left-bottom">圖表3</div>
        </div>
        <div class="body-center">
          <div class="body-center-top">主圖表</div>
          <div class="body-center-bottom">圖表4</div>
        </div>
        <div class="body-right">
          <div class="body-right-top">圖表5</div>
          <div class="body-right-bottom">圖表</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { onMounted, ref } from 'vue';
// 獲取數(shù)據(jù)大屏展示內(nèi)容盒子的DOM元素
const screen = ref()
// 定義大屏縮放比例
function getScale(width = 1920, height = 1080) {
  const ww = window.innerWidth / width
  const wh = window.innerHeight / height
  return ww < wh ? ww : wh
}
// 動(dòng)態(tài)調(diào)整screen div的尺寸
function screenResize() {
  // scale：進(jìn)行縮放計(jì)算，基礎(chǔ)尺寸：1980w * 1080h。
  // translate：元素平移，正數(shù)表示沿軸的正向移動(dòng)。translate(-30%, -60%)以基點(diǎn)沿X軸反方向平移30%，沿Y軸反方向平移60%。
  screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}
onMounted(() => {
  screenResize()
})
// 監(jiān)聽視口尺寸的變化
window.onresize = () => {
  screenResize()
}
</script>
<style lang="scss" scoped>
// 最外層容器
.container {
  // 尺寸同視口一樣
  height: 100vh;
  width: 100vw;
  .screen {
    // 設(shè)置一個(gè)基礎(chǔ)的尺寸大小
    height: 1080px;
    width: 1920px;
    position: fixed;
    left: 50%;
    top: 50%;
    // 平移的基點(diǎn)：左上角
    transform-origin: left top;
    .title {
      height: 5%;
      width: 100%;
      display: flex;
      // 父容器樣式已經(jīng)指定display是flex。在三個(gè)子容器中樣式指定flex: 1;，則會(huì)將父容器寬度進(jìn)行三等分。
      .title-divide {
        flex: 1; // 長(zhǎng)度等分
        height: 100%;
      }
      .title-left {
        background-color: pink;
      }
      .title-center {
        background-color: greenyellow;
      }
      .title-right {
        background-color: yellow;
      }
    }
    .body {
      height: 95%;
      width: 100%;
      display: flex;
      // 主軸方向：水平方向
      flex-direction: row;
      justify-content: space-between;
      // 父級(jí)容器樣式已經(jīng)設(shè)置display為flex
      .body-left {
        // 0: flex-grow放大比例。默認(rèn)為0，不放大。
        // 1：flex-shrink縮小比例。默認(rèn)為1。當(dāng)空間不足時(shí)，所有子元素等比例縮小。
        // 30%：flex-basis在主軸方向上的基礎(chǔ)尺寸
        flex: 0 1 30%;
        display: flex;
        // 主軸方向：垂直方向
        flex-direction: column;
        // .body-left-top、.body-left-middle、.body-left-bottom三個(gè)樣式中都是flex：1。
        // 表示三個(gè)元素的方法比例都是1，即他們等分空間。
        .body-left-top {
          flex: 1;
          background-color: antiquewhite;
        }
        .body-left-middle {
          flex: 1;
          background-color: rgb(232, 250, 215);
        }
        .body-left-bottom {
          flex: 1;
          background-color: rgb(189, 193, 247);
        }
      }
      .body-center {
        flex: 0 1 40%;
        display: flex;
        // 主軸方向：垂直方向
        flex-direction: column;
        // .body-center-top、.body-center-bottom的樣式中flex不一樣。
        // 表示.body-center-top占據(jù)空間是.body-center-bottom的2倍。
        .body-center-top {
          flex: 2;
          background-color: rgb(242, 215, 250);
        }
        .body-center-bottom {
          flex: 1;
          background-color: rgb(215, 241, 250);
        }
      }
      .body-right {
        flex: 0 1 30%;
        display: flex;
        // 主軸方向：垂直方向
        flex-direction: column;
        // .body-right-top、.body-right-bottom的樣式中flex不一樣。
        // 表示.body-right-top占據(jù)空間是.body-right-bottom的2倍。
        .body-right-top {
          flex: 2;
          background-color: rgb(176, 177, 178);
        }
        .body-right-bottom {
          flex: 1;
          background-color: rgb(10, 141, 234);
        }
      }
    }
  }
}
</style>

// main.ts中全局引入 
import { createApp } from 'vue' 
import DataVVue3 from '@kjgl77/datav-vue3' 
const app = createApp(App) 
app.use(DataVVue3) 
app.mount('#app')

//在vue文件中，這樣使用ECharts
<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 繪制圖表
myChart.setOption({
  title: {
    text: 'ECharts 入門示例'
  },
  tooltip: {},
  xAxis: {
    data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
  },
  yAxis: {},
  series: [
    {
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
</script>