大屏可视化开发

一、项目搭建。

1. Vue2或者vue3搭建项目,UI库element和dataV可视化组件库（强烈推荐），echarts必不可少。

npm install @jiaminghi/data-view
1

在main.js中引入

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)
1
2
3

3.页面利用grid布局，将页面栅格化划分,特别推荐很好用的布局

display:grid;
grid-template-rows:3fr 4fr 3fr;
或者
grid-template-columns: 3fr 3fr 4fr;
1
2
3
4

4.记得封装echarts组件。

5.页面开发完成后必须要做字体自适应，适配。

1.下载插件 postcss-pxtorem，postcss-url，postcss-import尽量用下边的版本，不然会提示版本报错

npm install postcss-pxtorem@5.1.1
npm install postcss-url@7.3.2
npm install postcss-import@11.1.0  //可下载可不下载
1
2
3

2.在.postcssrc.js中配置

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
    "plugins": {
    //   "postcss-import": {},
      "postcss-url": {},
      // to edit target browsers: use "browserslist" field in package.json
    //   "autoprefixer": {},
      'postcss-pxtorem': {
        rootValue: 16,
        propList: ['*']
      }
    }
  }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.创建rem.js

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  let clientWidth =  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const scale = clientWidth / 1920
  // 设置页面根节点字体大小, 字体大小最小为12
  let fontSize = (baseSize * Math.min(scale, 2))>12 ? (baseSize * Math.min(scale, 4)): 12
  document.documentElement.style.fontSize = fontSize  + 'px'
}
//初始化
setRem()
//改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
  setRem()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.在main.js中引入

import './rem.js'
1

重新启动项目根据自己需要的字体大小在rem.js中调整缩放

• 因为echarts的单位默认是px，对echarts自适应需要处理fontSize的值，在utils文件夹下新建工具函数fontSize.js。

export function fontSize(res){
    const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;
    return res * fontSize;
}
1
2
3
4
5
6

在main.js中引入

import { fontSize } from '@/utils/fontSize'
Vue.prototype.fontSize = fontSize
1
2

在echarts中配置

axisLabel: {
            "show": true,
            "textStyle": {
              "color": "#fff",
              fontSize:this.fontSize(14)
            }
          },
1
2
3
4
5
6
7

如此，echarts的自适应配置就做好了

5.在主页面的mounted里添加屏幕尺寸变化强制刷新

window.onresize = () => {
      return (() => {
        // this.$forceUpdate();//强制更新数据
        this.$router.go(0);
      })();
    };
1
2
3
4
5
6

6.在知道大屏分辨率的情况下可以使用谷歌的device模拟器调整分辨率，然后调整样式，展示出来的跟大屏的显示效果是一样的。

大屏到此开发完成。