How to fit the screen (PX)

How to adapt different screen sizes of computers and mobile phones

The screen width is left and right and the height is up and down

The width and height can be calculated by the following algorithm Wp is the effective width of the page and Hp is the effective height of the page

If the device aspect ratio is greater than 16/9, the page width equals 16/9 of the device height

If the device aspect ratio is 16/9, the page width equals the device height

If the device aspect ratio is less than 16/9, the page width equals the device height

How to restore the design draft in equal proportion

The corresponding REM is calculated by writing PX() function as follows

How to use Grid layout

Grid is the layout of the network format, it will be divided into a Grid, can arbitrarily combine different grids, make a variety of layout.

The head is made into header, the main part uses Grid layout to distribute various charts of the image, and the footer part indicates my code cloud account

The pixels on the right can be adjusted according to the screen size. I used fr because of the /

How do I use Echarts

Make sure to reference the Echarts package if it is installed Without installing it by using the following command

npm install echarts --save

Reference echarts

import * as echarts from 'echarts'; Var myChart = echarts.init(document.getelementById ('main')); 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

After the chart reference by its modified to obtain the desired effect Effect can be achieved by echarts.apache.org/zh/cheat-sh… The site is modified