In station B, I learned how to use Echarts to make data visualization pages with Teacher Pink, the dark horse programmer of UP.
Another success for nothing! The finished page looks something like this.
The layout uses flex layout
The head layout
HTML part
The CSS part
Main part
The main body also uses Flex layout, divided into three graphics boxes on each side of the 3, 5 in the middle of the big box.
html
The CSS part
Once the main layout is complete, start on the left box, because the left box is the same as the right box. Just write out the CSS for the left box, then copy and paste it into the right box.
The HTML section of the left box
Divide the first box bar chart on the left into two sections, the title and the graphic section. A bottom box is added to add small edges to the bottom sides.
The first box is the CSS section
And then I’m going to set the top left corner, the top right corner and the bottom left corner and the bottom right corner. Use panel: : before and panel: : After. Set the top left corner and top right corner.
Then add the bottom left corner of the box to the bottom right corner. Since the befor and After selectors can only be used twice, add a positioned box at the bottom, panel-footer, and then add edges using before and after.
After finishing the first box, copy and paste it twice to complete the layout on the left. Then copy and paste all the boxes on the left to the right, and start laying out the middle box.
The middle box is made up of two parts: the text on the top box and the map on the bottom box.
HTML part
The CSS section on the box
The line separating the text from the number on the box.
Below the box map section
Add rotation animation to map2 and MAP3 distribution, map2 rotates 360° clockwise and MAP3 rotates counterclockwise.
