钢材信息小程序开发总结(四) --- 最普通数据大屏
整体项目代码 钢材信息小程序开发总结(一) --- 整体介绍 钢材信息小程序开发总结(二) ---uniapp 钢材信息小程序开发总结(三) ---EggJS
主要是做个最垃圾的大屏给朋友视察用 查看demo: https://klren0312.github.io/ironInfoWeapp/
一、使用的图表: ECharts
ECharts没啥好说的功能全面, 图表种类多样 官网: https://www.echartsjs.com/zh/index.html
我们的大屏里主要用的是他的柱状图, 折线图, 以及地图
主要就地图有些特效, 比如地图打点带涟漪动画; 飞线等
打点带涟漪动画需要使用effectScatter
, 注意不是 scatter
effectScatter
文档: https://www.echartsjs.com/zh/option.html#series-effectScatter
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
showEffectOn: 'render',
zlevel: 2,
rippleEffect: {
period: 2.5, //波纹秒数
brushType: 'stroke', //stroke(涟漪)和fill(扩散),两种效果
scale: 3 //波纹范围
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
color: '#18cf92',
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
},
data: convertScatterData(scatterVal)
}
飞线则使用lines
lines
文档: https://www.echartsjs.com/zh/option.html#series-lines
{
tooltip: {
show: false
},
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertFlyData(scatterVal)
}
image.png
二、大屏自适应问题
当然首先是长宽需要是百分比
需要监听resize
事件
window.onload = function () {
const container = document.querySelector('.container')
setSize(container)
document.addEventListener('resize', setSize)
}
setSize
函数,
document.body.clientWidth
为body
的宽度, 该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条
window.screen.height
为屏幕的高度
window.screen.width
为屏幕的宽度
通过给整个大屏赋值屏幕的长宽, 然后将页面按照实际宽度与屏幕宽度的比缩放, 达到整个页面适应性缩放, 当然需要F11全屏查看才行
function setSize (dom) {
const { width: allWidth, height } = screen
const currentWidth = document.body.clientWidth
dom.style.width = allWidth + 'px'
dom.style.height = height + 'px'
dom.style.transform = `scale(${currentWidth / allWidth})`
}
三、页面加载动画
由于页面刚加载会出现图片没加载, 图表没初始化的问题, 所以需要加个全屏加载动画 动画可以在这里选个: https://epic-spinners.epicmax.co/
然后就是让加载动画在最上层加载, 等页面onload
后移除加载动画即可
window.onload = function () {
document.getElementById('js-loading').remove()
}
image.png
- 【译】Windows下的Docker Machine - 如何设置你的Docker主机
- 史上最透彻的KMP算法讲解
- 【译】助你成功搭建云应用的12条方法
- 你能用微信小程序打开小程序了【附开发方法】
- Logistic回归实战篇之预测病马死亡率(一)
- 腾讯游戏DBA利刃 - SQL审核工具介绍
- Logistic回归实战篇之预测病马死亡率(二)
- Windows环境下跑通Truffle开发环境
- Logistic回归实战篇之预测病马死亡率(三)
- 如何将finecms链接URL中的list和show去掉
- Solidity语法知识点(文末有彩蛋)
- 人脸Haar特征与快速计算神器:积分图
- 内存为王:DBIM RAC Share Nothing架构的挑战和解决方案
- 调用finecms栏目多图怎么实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法