【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放

效果图

从上到下，依次是F11效果，和正常网页效果，以及小屏效果。都是同比例缩放的，布局不会混乱

聊一下

为了让大家直观的看到所有的代码，所以结构方法等就不分各个组件引入了，会很麻烦要找哪是哪，我直接把所有的图都写在了一个vue组件内。并配上注释，相信大家可以很容易找到哪里对应哪里区域

核心点

这里的核心点就是等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写css定死，通过屏幕大小改变对应等比例缩放，达到屏幕适配效果

前置条件

下载dataV

npm install @jiaminghi/data-view

下载echarts

npm install echarts --save

下载elementul

npm i element-ui -S

下载china.json
由于数据比较大，我另一个帖子写了，就不重复了，直接去复制这个文件https://blog.youkuaiyun.com/seeeeeeeeeee/article/details/121495485

main.js引入

引入dataV

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

引入elementul

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

引入china.json

import geoJson from '@/utils/china.json'
echarts.registerMap('china', geoJson);

引入echarts

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

第一步：创建等比例缩放函数 drawMixin.js

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
   
   
  width: '1',
  height: '1',
}

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
   
   
  data() {
   
   
    return {
   
   
      // * 定时函数
      drawTiming: null
    }
  },
  mounted () {
   
   
    //进入触发
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
   
   
    window.removeEventListener('resize', this.resize)
  },
  methods: {
   
   
    calcRate () {
   
   
      //拿到整个页面元素
      const appRef = this.$refs["appRef"]
      //如果没有值就结束
      if (!appRef) return 
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      //判断：如果有值代表页面变化了
      if (appRef) {
   
   
        //判断当前宽高比例是否大于默认比例
        if (currentRate > baseProportion) {
   
   
          // 如果大于代表更宽了，就是放大了
          //那么把默认缩放的宽高改为：同比例放大
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          console.log(scale.width,scale.height,'放大');
          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${
     
     scale.width}, ${
     
     scale.height}) translate(-50%, -50%)`
        } else {
   
   
          // 如果不大于默认比例代表缩小了。
          //那么把默认缩放的宽高改为：同比例缩小
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          console.log(scale.width,scale.height,'缩小');
          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${
     
     scale.width}, ${
     
     scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize () {
   
   
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
   
   
        this.calcRate()
      }, 200)
    }
  },
}

第二步：创建用来给日期时间转换格式用的函数index.js

/**
 * @param {Function} fn 防抖函数
 * @param {Number} delay 延迟时间
 */
export function debounce(fn, delay) {
   
   
  var timer;
  return function () {
   
   
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
   
   
      fn.apply(context, args);
    }, delay);
  };
}

/**
 * @param {date} time 需要转换的时间
 * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
 */
export function formatTime(time, fmt) {
   
   
  if (!time) return '';//没传时间返回空
  else {
   
   
    const date = new Date(time);
    const o = {
   
   
      'M+': date.getMonth() + 1,//月
      'd+': date.getDate(),//日
      'H+': date.getHours(),//时
      'm+': date.getMinutes(),//分
      's+': date.getSeconds(),//秒
      'q+': Math.floor((date.getMonth() + 3) / 3),//月+3/3
      S: date.getMilliseconds(),//返回时间的毫秒
    };
    if (/(y+)/.test(fmt))//匹配1个到多个y
    //这一步把年转换完毕
    fmt = fmt.replace(
      RegExp.$1,//拿到y+匹配到的第一个分组
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
      );
      //这一步把生下的格式继续匹配转换
    for (const k in o) {
   
   
      if (new RegExp('(' + k + ')').test(fmt)) {
   
   
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
    return fmt;
  }
}

第三步：大屏可视化代码

复制进去就行了

<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-show="loading">Loading...</dv-loading>
      <div class="host-body">
        <div>
          <!-- 顶部title部分 -->
          <el-row>
            <el-col :span="6"
              ><dv-decoration-8
                class="title_right"
                :color="['#008CFF', '#00ADDD']"
            /></el-col>
            <el-col :span="12"
              ><div class="title_text">数 据 可 视 化 系 统</div>
              <dv-decoration-5
                class="title_center"
                :color="['#008CFF', '#00ADDD']"
            /></el-col>
            <el-col :span="6"
              ><div class="title_time">{
   
   {
   
    dateYear + dateWeek + dateDay }}</div>
              <dv-decoration-8
                :reverse="true"
                class="title_left"
                :color="['#008CFF', '#00ADDD']"
            /></el-col>
          </el-row>
          <!-- 主体部分 -->
          <el-row>
            <!-- 第一列 -->
            <el-col :span="6">
              <!-- 饼图部分 -->
              <div class="left_box1">
                <dv-border-box-12>
                  <div id="Rose_diagram"></div>
                  <dv-active-ring-chart
                    :config="config"
                    class="left_box1_rose_right"
                  />
                  <div
                    class="rose_text"
                    v-for="(item, index) in numberData"
                    :key="index"
                  >
                    <p>
                      <span class="coin">￥</span>
                      <span class="rose_text_nmb">{
   
   {
   
   
                        item.number.number
                      }}</span>
                    </p>
                    <p>
                      <span>{
   
   {
   
    item.text }}</span>
                      <span class="colorYellow">(件)</span>
                    </p>
                  </div>
                </dv-border-box-12>
              </div>
              <!-- 柱状图部分 -->
              <div class="left_box2">
                <dv-border-box-12 style="padding-top: 10px">
                  <p style="margin-left: 15px">数据统计图</p>
                  <div id="columnar"></div>
                </dv-border-box-12>
              </div>
              <!-- 轮播表格部分 -->
              <div class="left_box3">
                <dv-border-box-12 style="padding-top: 10px">
                  <dv-scroll-board
                    :config="board_info"
                    class="carousel_list"
                    oddRowBGC="#fff"
                  />
                </dv-border-box-12>
              </div>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="12">
              <!-- 中国地图 -->
              <div id="china-map"></div>
              <!-- 折线图 -->
              <div class