大屏可视化项目

如何找素材

[TOC]

方方的最终成果展示

https://frankfang.gitee.io/test-20210000001/#/

初始代码：https://github.com/FrankFang/WgGRGvfAVyp5

最终代码:https://github.com/FrankFang/U6rda2laBInU

echarts theme builder: https://echarts.apache.org/en/theme-builder.html

著名的设计网站

Dribble，站酷

花时间找下素材就可以了。

关键字

大屏， big screen， dashboard

工具

取色工具

尺寸工具

如何适配屏幕

算法

img202203121756404

Screen Shot 2022-03-12 at 5.56.07 PM

$$W~p = \left\{\begin{aligned} h~设备 \times \frac{16}{9}， \frac{w~设备}{h~设备} > \frac{16}{9}\\ w~设备， \frac{w~设备}{h~设备} <= \frac{16}{9} \end{aligned} \right\}$$

$$H~p = W~p \div \frac{16}{9}$$

常用latex符号公示

Wp为页面有效宽度，Hp为页面有效高度

以上公式解读：

• 如果屏幕宽度大于16：9， 即屏幕很宽，屏幕宽度就是屏幕高度乘以16：9，比如说高度是900，那么宽度就是1600，因此高度就是宽度除以16：9

• 如果屏幕宽度小于16：9，即屏幕很窄，那么宽度就是屏幕的宽度

如果屏幕很宽，页面左右居中，如果屏幕很高，页面就上下居中，四周留白即可

然后在head里用JS设置1rem = Wp / 100（下文中会用到）

Rem计算公式

用rem

$$\frac{Size页面}{W页面}=\frac{Size设计}{W设计}， W页面 = 100 \times rem$$

$$Size页面 = \frac{Size设计}{W设计} \times 100 \times rem$$

假设某div在设计稿中长100px，设计稿宽度1920px

那么该div在页面中长为100/1920 x 100rem

最后可以写一个px（）函数来计算100px对应的rem

实践： 大屏适配

用ps截取工具可以轻松测量宽高像素

实践： 用rem代替像素

//helper.scss
@function px($n){
  @return $n / 2420 * 100rem;
}

//home.scss
@import "../shared/helper";
.x {
  width: px(367);
  height: px(315);
  border: 1px solid red;
}

实践： 制作header

在home.tsx下

import React from 'react';
import './home.scss';
import headerBg from '../images/header.png';

export const Home = () => {
  return (
    <div className="home">
      <header style={{backgroundImage: `url(${headerBg})`}}></header>
    </div>
  );
};

src文件夹下创建一个image文件夹，然后把header.png拖进去，文件在https://github.com/FrankFang/F4rp82vr0tYn/tree/master/src/images

然后在home.tsx引入图片,此时会报错

import image from '../images/header.png'

需要在src下创建一个custom.d.ts文件，输入以下

declare module "*.png" {
	const value :any;
	export = value;
}

在home.scss文件下,添加background-size:cover,这样可以让图片完全盖住背景（无论页面大小如何转换）

.home {
  header{
  height: px(99);
  background-size:cover;
  }
}

使用Flex和Grid布局

技术总结：

1. 在父元素上加display:flex 和flex-direction:column;

2. 在子元素上加flex:1

即可让子元素的高度占满父元素

添加空隙

  grid-column-gap: px(28);
  grid-row-gap: px(28);

制作背景和边框

原始图片的边框是四角发光，使用box-shadow可以达到这种效果,box-shadow可以叠加使用如下面的代码

 box-shadow: 17px 0 0 -16px #0e325f,
        -17px 0 0 -16px #0e325f,
        0 17px 0 -16px #0e325f,
        0 -17px 0 -16px #0e325f,
        9px 0 0 -8px #0d4483,
        -9px 0 0 -8px #0d4483,
        0 9px 0 -8px #0d4483,
        0 -9px 0 -8px #0d4483,;

无意中看到一个很好看的配色方案

Screen Shot 2022-03-13 at 10.22.45 PM

Screen Shot 2022-03-13 at 10.23.05 PM

第一个图表

引入echarts

import * as echarts from 'echarts';

调用官网的例子

const divRef = useRef(null)
    useEffect(()=>{  /
        console.log(divRef.current);
        let myChart = echarts.init(divRef.current);
        myChart.setOption({
            textStyle: {
                fontSize: px(12),
                color: '#79839E'
            },
            title: {show: false},
            legend: {show: false},
            xAxis: {
                data: ['兰州新区', '兰州新区', '兰州新区', '兰州新区', '兰州新区', '兰州新区', '兰州新区', '兰州新区', '兰州新区'],
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {color: '#083B70'}
                },
                axisLabel: {
                    fontSize: px(12),
                    formatter(val) {
                        if (val.length > 2) {
                            const array = val.split('');
                            array.splice(2, 0, '\n');
                            return array.join('');
                        } else {
                            return val;
                        }
                    }
                },
            },
            grid: {
                x: px(40),
                y: px(40),
                x2: px(40),
                y2: px(40),
            },
            yAxis: {
                splitLine: {show: false},
                axisLine: {
                    show: true,
                    lineStyle: {color: '#083B70'}
                },
                axisLabel: {
                    fontSize: px(12)
                }
            },
            series: [{
                type: 'bar',
                data: [10, 20, 36, 41, 15, 26, 37, 18, 29]
            }]
        });
    }, []);

如何布局

使用Grid

理由1： 大屏一般是可控的，可以装Chrome

理由2: Grid布局太方便了，行，列，间隙都可控

使用echarts

优点

开发效率高

缺点

可定制性一般

实时更新数据

用setTimeout或者setInterval，让数据动起来

用法

重新设置echart的option即可

测试并修复bug

认真对待

如果你把这个项目写到自己的简历，请按照方方的教程做完之后，自己再重新做一次，然后换个皮肤防止撞车，并仔细测试是否有bug，有就修复或隐藏它

部署

自己开发用

yarn dev

给别人/面试官看的

yarn build --base ./

打包完成后，会出现一个dist目录， 里面就两个东西，一个assets目录和一个index.html

方方这边推荐用gitee 码云

cd dist
git init
git add .
git commit -m deploy
git remote add origin xxxxx
git push -u origin master

gitee的pages，直接启动即可，选择https

简历示例参考

技术栈：React、ReactRouter、Echarts

这个项目是我在学习前端可视化与 echarts 时，仿照方应杭的开源项目制作而成的。 页面布局使用了 Grid 和 Flex 布局，为了适应所有屏幕，我使用了动态 rem 方案，具体思路见我的博客（这里应给出链接）。 项目中包含的图例有柱形图、折线图、饼图、地图和表格等，并且所有图例都可以实时更新数据并辅以动画交互。 通过这个项目，我掌握了大屏可视化项目的制作技巧。