element-plus+vue3+echarts实现自适应可视化大屏

安装 autofit.js 、echarts
npm install --save autofit.js

<template>
  <div class="content">
    <div class="zerofloor">
      <div class="datatitle" id="datatitle">生产作业可视化大屏</div>
      <div class="dashboardquery" id="dashboardquery">
        <div class="dashboarddate">
          <el-date-picker style="width: 130px" v-model="todaydate" @change="handleChangedate" :clearable="false" :default-value="new Date()" type="date"></el-date-picker>
          <el-cascader ref="cascaderRef" @change="handleChangecascader" v-model="warehouseSelect" style="width: 230px" :options="warehouseOptions" :props="cascaderprops" />
          <el-select v-model="dimension" placeholder="Select" style="width: 130px" @change="handleChangeDimension">
            <el-option v-for="item in dimensionOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
    </div>
    <div class="firstfloor">
      <el-row>
        <div class="data-progress" id="data-progress">
          <div class="progress" v-for="item in orderOptions" :key="item.index">
            <div class="leftprogress">
              <el-progress type="circle" :percentage="item.percentage" :stroke-width="10" :width="progresswidth" :color="colors">
                <template #default="{ percentage }">
                  <span class="percentage-value">{
  { percentage }}%</span>
                  <br />
                  <span class="percentage-label">{
  { t('page.完成率') }}</span>
                </template>
              </el-progress>
            </div>
            <div class="rightprogress">
              <span class="progress-text">{
  { item.name }}</span>
              <br />
              <span class="progress-text">{
  { item.value }}</span>
            </div>
          </div>
        </div>
      </el-row>
    </div>
    <div class="secondfloor">
      <el-row>
        <el-col :span="12">
          <div class="box-card">
            <span class="cardhead">▋</span>
            <span class="cardtitle">要货单</span>
            <br />
            <div id="requireGoodsPie" style="width: 100%"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box-card">
            <span class="cardhead">▋</span>
            <span class="cardtitle">调拨订单/销售订单</span>
            <br />
            <div id="transOrSaleOrderPie" style="width: 100%"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="thirdfloor">
      <el-row>
        <el-col :span="12">
          <div class="jianxuan">
            <div class="box-card">
              <span class="cardhead">▋</span>
              <span class="cardtitle">发货通知单</span>
              <br />
              <div id="outOrderPie" style="width: 100%"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="peisong">
            <div class="box-card">
              <span class="cardhead">▋</span>
              <span class="cardtitle">库存调拨入库单</span>
              <br />
              <div id="stockTransInPie" style="width: 100%"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="fourthfloor">
      <el-row>
        <el-col :span="24">
          <div class="quehuo">
            <div class="box-card">
              <span class="cardhead">▋</span>
              <span class="cardtitle">配送单</span>
              <div>
                <!-- 配送单状态 -->
                <div id="delieveryOrderPie" style="width: 50%; float: left; background-color: #0b2545"></div>
                <!-- 轨迹 -->
                <div id="delieveryTrackPie" style="width: 50%; float: left; background-color: #0b2545"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
      reactive, onMounted, ref, watch } from 'vue'
import {
      i18n } from '@/locales/setupI18n'
import {
      success, confirmBox } from 'fl-ui'
import {
      warningbox, errorbox } from '@/utils'
import * as echarts from 'echarts'
import autofit from 'autofit.js'
import {
      Download } from '@element-plus/icons-vue'
import {
      QueryDashboardOptions, QueryDashboardData } from '@/api/datacenter/datadashboard'
import {
      fwSelect, fwConstant, fwWarehouseMember, fwTempPage } from '@/components'
import {
      color } from 'html2canvas/dist/types/css/types/color'
const {
      t } = i18n.global as any

let leftName = ref('')
let progresswidth = 90
let pageheight = window.innerHeight // 获取窗口高度
let cardheight = 0 // 获取窗口高度
const colors = [
  {
      color: '#f56c6c', percentage: 20 },
  {
      color: '#e6a23c', percentage: 40 },
  {
      color: '#5cb87a', percentage: 60 },
  {
      color: