大屏可视化开发
一、项目搭建。
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模拟器调整分辨率,然后调整样式,展示出来的跟大屏的显示效果是一样的。
大屏到此开发完成。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiakfea
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22