钢铁信息小程序开发总结（四）——最常见的数据屏幕
小程序开发
浏览：497 次
它主要用于制作最多的垃圾屏幕供朋友检查
查看
1、 使用的图表：ECharts
ECharts无话可说。它具有全面的功能和各种图表
官方网站：
我们的大屏幕主要使用他的直方图、折线图和地图
地图上有一些特殊效果，例如带有涟漪动画的地图点；Flywire等
点涟漪动画需要EffectScatter。请注意，它不是扫描仪
EffectScatter文档：
{
类型：“effectScatter”，
coordinateSystem:“地理”，
symbolSize:10，
showEffectOn:'渲染'，
zlevel:2，
涟漪效果：{
周期：2.5，//波纹秒
笔刷类型：“stroke”，//笔划和填充，两种效果
比例：3//波纹范围
},
标签：{
正常：{
显示：错误
},
强调：{
显示：错误
}
},
项目样式：{
颜色：“#18cf92”，
强调：{
borderColor:“#fff”，
borderWidth:1
}
},
数据：convertScatterData（scatterVal）
}
飞行线路使用线路
行文档：
{
工具提示：{
显示：错误
},
类型：'行'，
zlevel:2，
效果：{
显示：true，
周期：4，//箭头指向速度。值越小，速度越快
轨迹长度：0.02，//特效轨迹长度[0,1]越大，轨迹越长越重
符号：“箭头”，//箭头图标
符号大小：4，//图标大小
},
线条样式：{
正常：{
宽度：1，//尾迹线宽
不透明度：1，//尾迹线的透明度
曲率：。3//尾流线的曲率
}
},
数据：convertFlyData（scatterVal）
}
图像.png
2、 大屏幕自适应问题
当然，首先，长度和宽度应以百分比表示
需要侦听调整大小事件
窗onload=函数（）{
const container=document.querySelector（“.container”）
setSize（容器）
文件addEventListener（'resize'，setSize）
}
SetSize函数，
document.body。clientWidth是主体的宽度。此属性包括内边距填充，但不包括边框、外边距和垂直滚动条
window.screen。高度是屏幕的高度
window.screen。宽度是屏幕的宽度
通过将屏幕的长度和宽度分配给整个大屏幕，然后根据实际宽度与屏幕宽度的比例缩放页面，可以实现整个页面的自适应缩放。当然，您需要在F11中查看整个屏幕
函数setSize（dom）{
const｛width:allWidth，height｝=屏幕
const currentWidth=文档.body.clientWidth
域样式。width=allWidth+'px'
域样式。height=高度+“px”
域样式。transform=`scale（${currentWidth/allWidth}）`
}
3、 页面加载动画
由于页面刚刚加载，图片尚未加载，图表尚未初始化，因此需要添加全屏加载动画
可以在此处选择动画：
然后让加载动画加载到顶层，并在页面加载后删除加载动画
窗onload=函数（）{
document.getElementById（'js-loading'）.remove（）
}
图像.png
