结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
同时有第三方开源库：Echarts（Apache ECharts），AntV，Highcharts，D3.js，three.js等
单独针对某个页面做大屏适配
mounted() {
this.$nextTick(() => {
// 监控屏幕尺寸变化
var bodyStyle = document.createElement("style");
// 这里根据具体的设计稿尺寸来定
bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;
document.documentElement.firstElementChild.appendChild(bodyStyle);
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
window.onresize = () => {
return (() => {
this.screenWidth = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
})();
};
document.addEventListener("keydown", (e) => {
if (e.code == "F11") {
this.screenWidth = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
}
});
});
},
watch: {
screenWidth: {
handler: function () {
// console.log("val", val);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
"," +
heightRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
},
immediate: true,
deep: true,
},
screenHeight: {
handler: function () {
// console.log("val", val);
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
designHeight = 1080, // 这里根据具体的设计稿尺寸来定
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function () {
var lateWidth = document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if (lateWidth === docWidth) return;
widthRatio = lateWidth / designWidth;
heightRatio = lateHeight / designHeight;
document.body.style =
"transform:scale(" +
widthRatio +
"," +
heightRatio +
");transform-origin:left top;overflow: hidden;";
}, 0);
},
immediate: true,
deep: true,
},
},
（上方适配代码来源于-最简单的vue大屏实现方式 - 简书）
关于echarts的使用
Echarts相对简单些，容易上手，很多项目二次开发。
echarts等组件库需要写大量的样式覆盖才行，所以有的企业会要求新人会改源码
但实际上很多时候我们通过官方提供的配置项隐藏元素再自己写一些内容定位到指定位置也能实现
其实echart每次图标注入数据有的时候要花不少时间，因为后端返回的数据是不能直接用的，要自己转换过滤成适合插件的格式
而echart图表类型多种多样，我们不可能记住所有方法属性，所以每次基本上都是随用随查
这中间我们可能会碰到各种各样的问题
echart初次加载样式错乱（相关文章）
我们发现词云初次加载出现问题，
查看代码
<div
:style="{ width: this.word_width + 'px' }"
ref="wz_word_cont"
class="wz_word_cont"
:class="special?'large-screen':''"
id="wz_word_cont"
v-show="wordArr.length > 0"
></div>
.wz_word_cont{
width: 100% !important;
height: 220px !important;
}
问题所在：宽度没指定，初始化识别不到正确的宽，解决方法如下，直接固定宽
.wz_word_cont{
width: 340px !important;
height: 220px !important;
}
比如页面全屏后出现留白、echarts视图页面窗口调整后才正常（页面初始化时样式错乱）
x轴数据过长轮播展示
在这中间我们可能碰到一些问题，比如echarts词云初始化加载窗口挤到一起，调整浏览器后才自适应，或是柱状图横坐标文字太长需要做倾斜处理这种问题
让eacharts的横坐标文字倾斜：
xAxis: [
{
data: [],
axisLabel: {
margin: 10,
color: 'rgba(202, 215, 245, 1)',
textStyle: {
fontSize: 7,
}, rotate: 50, // 设置标签倾斜角度，单位为度
},}]
数据太多还会引起图叠在一起，解决方法：相关文章
就是加滚动条
关于SCUI
SCUI （SCUI）是一个中后台前端解决方案，基于VUE3和elementPlus实现。
使用最新的前端技术栈，提供各类实用的组件方便在业务开发时的调用，并且持续性的提供丰富的业务模板帮助你快速搭建企业级中后台前端任务。
SCUI的宗旨是 让一切复杂的东西傻瓜化。
今天接到了一个在SCUI后台管理系统中开发一个大屏页面的需求，公司买了一个图书馆管理大屏的项目源码供参考，只有原型没有设计图，只能先借助其他项目的psd图和图标来用，时间紧迫。
直接把大屏项目的视图代码全拷过去，有报错解决报错，缺库引库，谨慎起见直接按照大屏项目库的原版本安装
大屏项目源码是使用的flexible适配，暂时不知道需不需要对大屏页面单独做适配，图书馆这个适配做的一般，窗口上下缩小字和元素都挤到一块了，正常应该取消或调整一些元素的展示
流畅度
大屏项目的流畅度需要很多插件支持，动画效果常使用的animate动画库如下
import WOW from "wow.js";
mounted里写
var wow = new WOW({
boxClass: "wow", // animated element css class (default is wow)
animateClass: "animated", // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function () {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window,
resetAnimation: true, // reset animation on end (default is true)
});
this.$nextTick(() => wow.init());
最后通过class名wow加开启指定动画的class启用
gsap动效库
wow.js动画库
数字丝滑滚动（vue3 数字滚动插件vue-number-roll-plus - 完竣世界） vue3-number-roll-plus
echarts-wordcloud词云库（ 一堆五颜六色的词汇的聚在一块，有大有小的散落着）（相关文章）
项目中获取各类时间的地方不少，用的是dayjs
大屏的页面，需求用到无缝滚动列表vue3-seamless-scroll，这个很好用，常用的属性就那么几个，引入后使用，完成列表滚动，说真的这个滚动一加，那味马上就上来了，高级感，这个插件使用起来特别简单好用
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
components: {Vue3SeamlessScroll},
<Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="tableBody">
</Vue3SeamlessScroll>
碎碎念
有高级感的大屏需要各种丝滑动效插件，很多本质上就是一些封装好的marquee动画
关于大屏我们很多的element插件都不太实用，像表格样式之类的我们要覆盖很久，所以很多时候不如自己写一些，毕竟大屏一般不会有分页
大屏项目要写很多组件，毕竟一小块一小块的方便维护，我推荐使用vuex做数据传递（
我在这里碰到了vuex自动导入文件内容的坑
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
3428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
