钢材信息小程序开发总结(四) --- 最普通数据大屏
整体项目代码 钢材信息小程序开发总结(一) --- 整体介绍 钢材信息小程序开发总结(二) ---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