数据可视化项目---下（看这一篇就够啦！）

数据可视化项目适配方案

1. 项目需求

• 设计稿是1920px
• PC端适配：宽度在 1024~1920之间页面元素宽高自适应

2. 适配方案

• flexible.js 把屏幕分为 10 等份
• 移动端的效果图是 750px
• cssrem 插件的基准值是 75px
• rem值自动生成

• flexible.js 把屏幕分为 10 等份
• PC端的效果图是 1920px
• cssrem 插件的基准值是 192px
• rem值自动生成

• 要把屏幕宽度约束在1024~1920之间有适配
• 代码实现：

  • @media screen and (max-width: 1024px) {
        html {
            font-size: 42.66px!important;
        }
    }
    @media screen and (min-width: 1920px) {
        html {
            font-size: 80px!important;
        }
    }

数据可视化项目开发

1. 项目基础布局

2. 边框图片

• 边框图片的使用场景

  

  • 盒子大小不一，但是边框样式相同，此时就需要边框图片来完成
  • 为了实现丰富多彩的边框效果，在CSS3中，新增了 border-image属性，这个新属性允许指定一幅图像作为元素的边框。

  

• 边框图片的切割原理
  • 把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。
  • 按照上右下左顺序切割

• 边框图片语法规范

属性	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width	图片边框的宽度（需要加单位）
border-image-repeat	图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸

3. 公共面板样式开发

• border-image-slice：按照上右下左顺序切割

4. 通过类名调用字体图标

• HTML页面引入字体图标中css文件。

<link rel="stylesheet" href="fonts/style.css">

• 标签直接调用图标对应的类名即可。（类名在css文件中标注）

<span class="icon-angellist"></span>

• ⚠️：引入css文件和声明字体图标的时候，一定注意路径问题。

5. 立即执行函数用法

• JS文件中，会有大量的变量命名，特别是Echarts使用中，需要大量初始化Echarts对象
• 为了防止变量名冲突(变量污染）我们采用立即执行函数策略：

(function(){})();

(function(){
    var num = 10;
})();
(function(){
    var num = 10;
})();

• ⚠️：多个立即执行函数中间必须加分号隔开。

6. 无缝滚动原理

• 先克隆marquee里面所有的行（row）
• 通过CSS3动画滚动marquee
• 鼠标经过marquee 就停止动画：

animation-play-state: paused;

7. 点位分析模块---使用Echarts图表

• 先官网找到类似的图表引入到页面中
• 根据需求修改具体的配置

8. 点位分析模块---总结

• ⚠️：饼形图的文字和引导线样式都是在series里面设置

9. 柱形图线条样式总结

10. 柱形图---单独修改其中某个柱形样式

• 核心原理：series对象里面的data数组,里面的每一个数据影响每一个柱形。
• data数组里面除了直接写数字，还可以是对象。
• 直接把data里面对应的数据修改为需求配置的对象即可。

11. 销售统计模块切换原理

• 核心原理：
  • series 里面的data 数据决定着折线的显示
  • 当我们点击不同的tab标签，就让 series 里面的data调用不同的数据即可
  • 我们现在只准备了年的数据，还需要准备季度、月和周的数据

12. 雷达图

13. 半圆形做法原理

• 半圆形做法：把一个饼形图分成三段，下面一段颜色设为透明即可

14. 饼形图角度调整startAngle