找素材
网站
Dribbble、站酷
关键字搜索big screen、dashboard、大屏
大屏适配公式
**Wp 为页面有效宽度，Hp 为页面有效高度
页面左右居中，上下居中，四周留白即可
然后在 head 里用 JS 设置 1rem = Wp / 100**
rem计算公式
**假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
那么该 div 在页面中长为 100/1920 X 100rem
最后可以写一个 px() 函数来计算 100px 对应的 rem**
根据公式我们可以在index.html设置响应式。
把页面高度和页面宽度写在这个div上面
并设置左右居中margin:0 auto
上下居中root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
我们以其中一个div为例，根据公式可以得到
Flex和Grid布局
Grid template用法
根据素材图可以大致分成四列
技术要点
- 父元素加上
display:flex以及flex-direction:column
- 在子元素加上
flex:1
即可实现让子元素的高度占满父元素
背景和边框
通过取色和观察，选用伪类元素
使用echart做数据图
安装后引入：import * as echarts from 'echarts'
根据官网的指南手册进行个性化定制。
基础折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
基础柱状图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
基础饼图
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
具体样式可以咋子配置里面自行修改
成品如下
