人在公司写Vue3，自适应可视化数据大屏被玩坏了

前言

在当今数字化时代，数据可视化大屏已成为了展示数据、监控系统状态、传达信息的重要手段之一。 Vue3 和 Vite 作为现代化的前端技术框架，以及强大的数据可视化库 ECharts，为我们构建自适应的数据大屏提供了便利。本文将介绍如何结合 Vue3 、Vite 、JavaScript 以及 ECharts 实现一个自适应的可视化数据大屏。

搭建项目框架

使用 Vite 构建 Vue3 项目

首先，我们使用 Vite 构建一个 Vue3 项目框架。Vite 是一个基于ESM的构建工具，可以实现快速的开发与热更新。

npm init @vitejs/app my-vue3-project --template vue
cd my-vue3-project
npm install
npm run dev

屏幕适配方案选择

针对大屏的自适应，我们选择缩放（scale）的方式来适配不同分辨率的屏幕。这种方式简单易行，能够保持页面布局的整体性。

缩放（scale）的方式是一种简单直接的大屏适配方案，其主要思路是通过改变整个页面的缩放比例来适应不同分辨率的屏幕。这种方案的核心在于将页面整体进行缩放，以保持页面布局的完整性和一致性。

缩放（Scale）适配方案思路：

获取屏幕尺寸： 首先，通过JavaScript获取当前设备屏幕的宽度（或高度）。
计算缩放比例： 然后，将获取到的屏幕尺寸与设计稿的基准尺寸进行比较，计算出缩放比例。
应用缩放： 最后，将计算出的缩放比例应用到整个页面上，从而实现页面的缩放适配。

缩放（Scale）与其他适配方案的比较：

与rem适配方案的比较：

优势： 缩放方案相对简单，无需修改样式单位，适用于已有项目的快速适配。
劣势： 缩放会导致元素的尺寸和间距等等比例缩放，可能影响页面布局的精准度。
与vw适配方案的比较：

优势： vw方案相对精确，能够根据视口宽度设置元素的尺寸，适用于需要更精确适配的场景。
劣势： 需要手动计算和设置每个元素的宽度和间距，工作量较大，且不易维护。
与flex适配方案的比较：

优势： flex布局能够根据容器的尺寸自动调整内部元素的排列和尺寸，适用于动态布局的情况。
劣势： 在大屏适配时，可能需要通过媒体查询等手段来调整flex容器的布局，工作量较大。
综上所述，缩放（Scale）适配方案适用于快速适配已有项目的场景，但可能影响页面布局的精准度。而rem、vw、flex等适配方案更适用于需要更精确适配或动态布局的情况。

项目结构设计

在项目结构设计上，我们可以采用如下的目录结构：

my-vue3-app/
├── public/                  # 静态资源文件夹
│   └── index.html           # 入口文件
├── src/                     # 源代码文件夹
│   ├── components/          # 组件文件夹
│   │   └── DataPanel.vue    # 数据面板组件
│   ├── App.vue               # 根组件
│   ├── main.js               # 入口文件
│   └── utils.js              # 工具方法
├── vite.config.js          # Vite配置文件
├── package.json             # 项目依赖文件
└── ...                      # 其他文件

屏幕适配 Hook 的封装与使用

封装自适应 Hook

// useAdaptive.js
import { ref, onMounted, onUnmounted } from 'vue';


export default function useAdaptive() {
  const scale = ref(1);

  const setScale = () =>; {
    const screenWidth = window.innerWidth;
    const baseWidth = 1920; // 设计稿基准宽度
    scale.value = screenWidth / baseWidth;
    document.body.style.transform = `scale(${scale.value})`;
  };

  onMounted(() =>; {
    window.addEventListener('resize', setScale);
    setScale();
  });

  onUnmounted(() =>; {
    window.removeEventListener('resize', setScale);
  });

  return { scale };
}

在项目中使用

// App.vue
<template>
  <div :style="{ transform: `scale(${scale})` }">
    <!-- Your content here -->
  </div>
</template>

<script>
import useAdaptive from './useAdaptive';

export default {
  setup() {
    const { scale } = useAdaptive();

    return { scale };
  }
}
</script>

ECharts 组件的封装与使用

在Vue组件中，我们可以通过引入ECharts实例，并在组件的生命周期钩子中初始化和调整图表大小

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';
import { initECharts } from './utils';

export default {
  name: 'DataPanel',
  setup() {
    const chartContainer = ref(null);

    const option = {
      // ECharts图表配置项
      // ...
    };

    onMounted(() => {
      const chart = initECharts(chartContainer.value, option);
    });

    onBeforeUnmount(() => {
      if (chartInstance) {
        chartInstance.dispose();
      }
    });
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

封装 ECharts 组件

// ECharts.vue
<template>
  <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['options'],
  emits: ['update:options'],
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption(this.options);
  },
  beforeUnmount() {
    this.chart.dispose();
  },
  watch: {
    options(newOptions) {
      this.chart.setOption(newOptions);
    }
  }
}
</script>

在项目中使用

<template>
  <ECharts :options="chartOptions" />
</template>

<script>
import ECharts from './ECharts.vue';

export default {
  components: {
    ECharts
  },
  data() {
    return {
      chartOptions: {
        // ECharts 配置
      }
    }
  }
}
</script>

优化与调整

性能优化

在数据可视化大屏中，图表的性能尤为重要。我们可以通过以下方式进行优化：

合理使用debounce来减少窗口大小变化时的resize事件触发频率。
使用canvas渲染模式，相比于svg，canvas在大数据量下有更好的性能表现。
利用ECharts的showLoading和hideLoading方法，在数据加载时显示加载动画，避免用户看到空白的图表。

交互优化

为了提升用户体验，我们可以增加一些交互功能：

提供缩放控制，允许用户通过鼠标滚轮或者按钮来缩放图表。
实现图表的导出功能，允许用户将当前的图表保存为图片或者PDF文件。

结语

通过本文的介绍，我们学习了如何使用Vue3、Vite、JavaScript和ECharts这四个工具来实现一个自适应的可视化数据大屏。我们采用了缩放（Scale）的方案来适配不同分辨率的屏幕，并通过性能优化和交互优化来提升用户体验。
希望本文能够帮助到正在从事数据可视化相关工作的开发者，也期待大家能够基于此方案开发出更多优秀的数据可视化大屏应用。