How to use the PX function to find the best place to display on various screens

1. If the screen is wide, center it left and right

2. If the screen is tall, center it up and down

To sum up: try to center the page and leave white space around it

Wp is the effective width of the page and Hp is the effective height of the page

If the width/height of the device is greater than 16/9, the page width is equal to the height of the device

You also need to set 1rem = Wp/10 in head

How to restore 1:1 design to the screen

1. If a div is 10px in length and 1920px in width, it is 100/1920*100rem on the page

2. Write a px() function to calculate rem for 100px

That’s why it’s set up above, right1rem = Wp/10

Flex layout or Grid layout

Because my design looks like this:

So after the overall analysis, we are going to use Flex layout

The above hangzhou intelligent transportation comprehensive platform is made into header

The following sections are all divided into main

Main is divided into left and right using space-around

Left and right display: column sections respectively

The rest of the middle license plate and the real-time data in the upper left corner are written in absolute location

For each section, we use disply:column layout

Hand-by-hand guide to using E Charts (provides examples for use in packaging tools)

First check if there is any E Charts package in package.json. If not, the version I use is “5.0.2” and reference Echarts first

import * as echarts from 'echarts';

Copy the code

Step 2: Use React Ref to pass E chart

Const divRef = useRef(null); useEffect(() => { const myChart = echarts.init(divRef.current); Mychart.setoption ({title: {text: 'ECharts starting example '}, Tooltip: {}, xAxis: {data: [' shirts' and 'sweater', 'snow spins unlined upper garment,' pants', 'high heels',' socks']}, yAxis: {}, series: [{name: 'sales' type:' bar 'data: [5, 20, 36, 10, 10, 20]}]}) }, [])Copy the code

At this point, the chart appears on the page, but there are usually some ugly or need to be adjusted

At this time, it is recommended to open the official term Quick-search manual of E Charts

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

Click in the corresponding configuration items can be modified (if there is still a problem that cannot be solved, let me know in the comments, I will help ~)