应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

 

　　完成该项目需要具备以下知识：

 

　　div + css 布局flex 布局Less原生js + jquery 使用rem适配echarts基础

 

　　设计稿是1920px

 

　　flexible.js 把屏幕分为 24 等份

 

　　cssrem 插件的基准值是 80px

 

　　插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。

 

　　但是别忘记重启vscode软件保证生效

 

　　body 设置背景图 ，缩放为 100% ， 行高1.15css初始化

 

　　高度为100px背景图，在容器内显示缩放比例为 100%h1 标题部分 白色 38像素 居中显示 行高为 80像素时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

 

　　header部分css样式

 

　　需要一个上左右的10px 的内边距

 

　　column 列容器，分三列，占比 3：5：3

 

　　css样式：

 

　　高度为 310px1像素的 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 字体是图标字体 electronicFontno-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，提供直观，交互丰富，可高度个性化定制的数据可视化图表。