在b站跟着up主黑马程序员pink老师学习用Echarts做了数据可视化的页面。

又一次白嫖成功！最终完成的页面事这样的。

这一次跟着视频敲了大概两天就全部实现了。分享一下心得吧。

布局使用了flex布局

头部布局

html部分

使用了JS 获取了时间戳。

css部分

这里由于刚开始没有在flex.js里面设置， var rem = docEl.clientWidth / 24。 function setRemUnit () { var rem = docEl.clientWidth / 24 docEl.style.fontSize = rem + 'px' } 导致图片一开始缩放过大最后还是重新改了过来。

主体部分

主体也是使用flex布局，分成三分两边图形盒子各占3份，中间大盒子占5份。

html

css部分

主体布局分布完成后就开始做左侧盒子，因为左侧盒子和右侧盒子相同只需要写出左侧盒子的css，然后在复制粘贴到右侧盒子就可以了。

左侧盒子html部分

将左侧第一个盒子柱形图分成上下两部分，标题还有图形部分。多加一个底部盒子是为了给底部两侧添加小棱角。

第一个盒子css部分

然后设置左上角，和右上角还有左下角和右小角的边框。 使用panel：：before和panel：：after。设置左上角，和右上角。

然后添加底部的盒子左下角，右下角。 因为befor和after选择器只能使用两次所以在底部添加一个有定位的盒子，panel-footer然后利用before和after添加棱角。

完成第一个盒子后直接复制粘贴两次，完成左侧布局。随后将左侧所有盒子复制粘贴到右侧，然后开始布置中间盒子。

中间盒子是由两部分组成上盒子的文字，和下盒子的地图。

html部分

上盒子用了ul和li布局，下面盒子用三张图片布局。

上盒子css部分

文字部分和上盒子数字的分割线。

下盒子地图部分

给map2 和 map3 分布加了旋转动画， map2顺时针旋转360°，map3逆时针旋转。