# Data Screen Template

**Repository Path**: weiyueshiyi/data-screen-template

## Basic Information

- **Project Name**: Data Screen Template
- **Description**: 基于transform:scale来实现大屏的等比例缩放
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-03
- **Last Updated**: 2024-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, webpack, 等比例缩放, 大屏自适应方案

## README

# data-screen-template
基于transform:scale来实现大屏的等比例缩放。rem方案其实不错，但是用到大屏上总觉得差点意思，不仅耗时，而且对浏览器最小字体不支持，使用了 echarts 图表, 里面的参数没办法应用 rem 的比例。
媒体查询是比较常见的屏幕适配方案了, 可以根据不同的屏幕大小提供不同的样式方案, 媒体查询可以很好的支持多数的pc端网页布局需要了。
但是问题也是比较明显:大量书写媒体查询代码, 比较繁琐；针对多种屏幕进行适配无法保证完全兼容所有的屏幕；无法支持 echarts 图表中的参数进行适配
viewpoint 基本是目前多数移动端开发都会使用的适配方式, 可以设置对移动端设备的的界面进行整体的缩放, 这种方式的适配是最佳的方案. 但是缺点是很明显的, 只能在移动端进行 viewpoint 适配, 我们目前的数据大屏项目就没办法用了.所以我选择了scale方案,使用组件式开发
<s>在util文件中的"autoResize.js,index.js,Resize.vue"是借鉴了阿里云dataV平台的可视化大屏</s>

# 更新日志
  * 使用webpack5重写，减少不必要方法与插件，提高构建速度
  * 合并webpack配置
  * 删除dataV方案
  * 等比例缩放方法更改
  * 安装滚动及轮播组件：具体方法参考官方文档
  * 封装echarts：基本的柱状图，折线图，饼图
  * 加入rem适配布局（启用方法：将main.js引入rem.js的注释放开。postcss.config.js中的注释放开。Home.vue文件中引入的ScaleBox标签去除，类名为homePage的内容放开）
  * 为了rem兼容echarts中本身的字体，新增utils——>fontSizeEcharts.js文件。使用方法：引入该文件作为方法传值使用
  * 加入autofit.js在app中全局挂载，不再使用自己封装的ScaleBox组件
## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```