《大屏可视化项目实践》

652 阅读2分钟

如何用px 函数找到各种屏幕上显示的最佳位置

1、如果屏幕很宽,就左右居中

2、如果屏幕很高,就上下居中

总结起来就是:页面尽量居中,四周留白

221931630747833_.pic.jpg

Wp是页面有效宽度 Hp是页面有效高度

(在代码中就直接用if判断,如果设备宽/设备高大于16/9,那页面宽度就等于设备高度16/9 如果设备宽/设备高小于等于16/9,那页面宽度就等于设备的高度)*

还需要在head中设置1rem = Wp/10

如何将设计稿1:1还原在屏幕上

1、假设某个div在设计稿中的长度是10px,设计稿的宽度是1920px 那么该div在页面中的长度是 100/1920*100rem

2、写成一个px()函数来计算100px对应的rem

333A559F-96E1-4F9F-8827-6B0A34F6468D_1_105_c.jpeg 这就是为什么上文中设置了1rem = Wp/10

用flex布局还是Grid布局

因为我的设计稿是这样的:

WechatIMG7.jpeg 所以整体分析之后打算用flex布局

上面的杭州市智慧交通综合平台做成了header

下面的部分全部划分为了main

main里面用space-around左右分成了left和right

left和right里面分别 display:column三个sections

剩下的中间车牌部分以及左上角的实时数据用绝对定位写上去

至于每个section里面都用disply:column布局

手把手教你使用E charts(提供在打包工具中使用的例子)

首先在package.json里查看有没有E charts包,没有就安装 我用的版本是 “5.0.2” 首先引用 echarts

import * as echarts from 'echarts';

第二步:用React ref 传递 E chart图表

use effect 在组件第一次挂载的时候把ref传进来
const divRef = useRef(null);
useEffect(() => {
  const myChart = echarts.init(divRef.current);
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
},[]) 

这时候页面上已经出现了图表,但是一般情况会有一些显示不美观或者需要调整的地方

这时候建议大家打开E charts官方的术语速查手册

echarts.apache.org/zh/cheat-sh…

WeChat412c09bd7cfd5d264ae1515ab2fa6170.png

点进去对应的配置项就可以修改啦 (如果依然有解决不了的问题评论留言告诉我,我会帮忙的~)