VUE3项目使用DavaV、ECharts实现数据大屏

<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 第一行：展示标题 -->
      <div class="title">
        <div class="title-divide title-left">标题左侧</div>
        <div class="title-divide title-center">标题</div>
        <div class="title-divide title-right">标题右侧</div>
      </div>
      <!-- 第二行：展示图表数据 -->
      <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';
// 获取数据大屏展示内容盒子的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
}
// 动态调整screen div的尺寸
function screenResize() {
  // scale：进行缩放计算，基础尺寸：1980w * 1080h。
  // translate：元素平移，正数表示沿轴的正向移动。translate(-30%, -60%)以基点沿X轴反方向平移30%，沿Y轴反方向平移60%。
  screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
}
onMounted(() => {
  screenResize()
})
// 监听视口尺寸的变化
window.onresize = () => {
  screenResize()
}
</script>
<style lang="scss" scoped>
// 最外层容器
.container {
  // 尺寸同视口一样
  height: 100vh;
  width: 100vw;
  .screen {
    // 设置一个基础的尺寸大小
    height: 1080px;
    width: 1920px;
    position: fixed;
    left: 50%;
    top: 50%;
    // 平移的基点：左上角
    transform-origin: left top;
    .title {
      height: 5%;
      width: 100%;
      display: flex;
      // 父容器样式已经指定display是flex。在三个子容器中样式指定flex: 1;，则会将父容器宽度进行三等分。
      .title-divide {
        flex: 1; // 长度等分
        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;
      // 父级容器样式已经设置display为flex
      .body-left {
        // 0: flex-grow放大比例。默认为0，不放大。
        // 1：flex-shrink缩小比例。默认为1。当空间不足时，所有子元素等比例缩小。
        // 30%：flex-basis在主轴方向上的基础尺寸
        flex: 0 1 30%;
        display: flex;
        // 主轴方向：垂直方向
        flex-direction: column;
        // .body-left-top、.body-left-middle、.body-left-bottom三个样式中都是flex：1。
        // 表示三个元素的方法比例都是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占据空间是.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占据空间是.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';
// 基于准备好的dom，初始化echarts实例
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>