一、项目搭建。
1. Vue2或者vue3搭建项目,UI库element和dataV可视化组件库(强烈推荐),echarts必不可少。
npm install @jiaminghi/data-view
在main.js中引入
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
3.页面利用grid布局,将页面栅格化划分,特别推荐很好用的布局
display:grid;
grid-template-rows:3fr 4fr 3fr;
或者
grid-template-columns: 3fr 3fr 4fr;
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 //可下载可不下载
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: ['*']
}
}
}
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()
}
4.在main.js中引入
import './rem.js'
重新启动项目根据自己需要的字体大小在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;
}
在main.js中引入
import { fontSize } from '@/utils/fontSize'
Vue.prototype.fontSize = fontSize
在echarts中配置
axisLabel: {
"show": true,
"textStyle": {
"color": "#fff",
fontSize:this.fontSize(14)
}
},
如此,echarts的自适应配置就做好了
5.在主页面的mounted里添加屏幕尺寸变化强制刷新
window.onresize = () => {
return (() => {
// this.$forceUpdate();//强制更新数据
this.$router.go(0);
})();
};
6.在知道大屏分辨率的情况下可以使用谷歌的device模拟器调整分辨率,然后调整样式,展示出来的跟大屏的显示效果是一样的。
大屏到此开发完成。