完成该项目需要具备以下知识：
div + css 布局
flex 布局
Less
原生js + jquery 使用
rem适配
echarts基础
设计稿是1920px
flexible.js 把屏幕分为 24 等份
cssrem 插件的基准值是 80px
插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。
但是别忘记重启vscode软件保证生效
body 设置背景图 ，缩放为 100% ， 行高1.15
css初始化
高度为100px
背景图，在容器内显示
缩放比例为 100%
h1 标题部分 白色 38像素 居中显示 行高为 80像素
时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba（255, 255, 255, 0.7） 而文字大小为 20像素
header部分css样式
需要一个上左右的10px 的内边距
column 列容器，分三列，占比 3：5：3
css样式：
高度为 310px
1像素的 1px solid rgba（25, 186, 139, 0.17） 边框
有line.jpg 背景图片
padding为 上为 0 左右 15px 下为 40px
下外边距是 15px
利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分
上面是no 数字模块
下面是map 地图模块
数字模块 no 有个背景颜色 rgba（101, 132, 226, 0.1）; 有个15像素的内边距
注意中间列 column 有个 左右 10px 下 15px 的外边距
no 模块里面上下划分 上面是数字（no-hd） 下面 是 相关文字说明（no-bd）
no-hd 数字模块 有一个边框 1px solid rgba（25, 186, 139, 0.17）
no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba（255, 255, 255, 0.2）; 高度 50% top 25% 即可
no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba（255, 255, 255, 0.7） 文字大小为 18px 上内边距为 10px
地图模块制作：
地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
中间样式
常见的数据可视化库：
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库（入手难）
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62162.shtml
