ECharts 数据可视化 下 基础篇

1.0 项目需求

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

1.1 适配方案

选择：

1. rem布局
2. 淘宝的 flexible.js
3. flex布局

pc端

1. 去flexible.js插件 把屏幕改为 24 等份
2. PC端的效果图是 1920px
3. cssrem 插件的基准值改成 80px （1920 / 24）

1.2 适配方案

1. 要把屏幕宽度约束在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;
    }
}

2.0 项目开发

1. css文件夹 （index.CSS）
2. fonts文件夹
3. images文件夹
4. JS文件夹（JQ 、 ECharts 、flexible、index、）

2.1 项目开发

1. 核心： 先做基础 html布局

2.2 边框图片

在CSS3中，新增了 border-image 属性，这个新属性允许指定一幅图像作为元素的边框。

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

边框图片语法：（重要）

1. border-image-source ： url() （用在边框的图片的路径。）
2. border-image-slice: 40 40 40 40 （图片边框向内偏移。（裁剪的尺寸，一定不加单位， 上右下左顺序）） 不带单位！！！！！！！
3. border-image-width （图片边框的宽度（需要加单位），但是这个不占内容位置）
4. border-image-repeat （图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸）

2.3 通过类名调用字体图标

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

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

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

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

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

2.4 立即执行函数用法

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

 		(function(){
     })();  

注意： 多个立即执行函数中间必须加分号隔开!!!

2.5 无缝滚动原理(把一整个内容复制一份放在下面)

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

 animation-play-state: paused;

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

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

2.6 点位分析模块

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

2.7 柱形图线条样式总结

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

核心原理：

1. series 对象里面的data数组,里面的每一个数据影响每一个柱形。
2. 重要的是，data数组里面除了直接写数字，还可以是对象。
3. 直接把data里面对应的数据修改为需求配置的对象即可。

2.9 销售统计模块切换原理

核心原理：

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

2.10 雷达图

2.10 半圆形做法原理

1. 半圆形做法：把一个饼形图分成三段，下面一段颜色设为透明即可
2. 饼形图角度调整startAngle（不是旋转度数，而是起始角度，支持范围[0, 360]）
   

2.11 全国热榜模块制作（重要）

1. 实际开发中，后台返回的真实数据如何渲染到页面中
2. ES6模板字符相关知识

2.12 全国热榜模块制作（重要）

ES6模板字符：(拼接字符串 )
ES6模板字符可以极大的提高我们的开发效率

		`${
       表达式}`        //模板字符串使用反钩号  ``  而且允许自由换行 

2.13 ECharts总结

1. ECharts 根据文档查阅即可（重点学会查阅方法）
2. 使用各种图表可以到我们笔记文档里面查阅
3. 基本配置熟悉之后，可以尝试其他配置
4. 学习ECharts最好的方法就是百度，百度里面搜图表的某个配置使用更高效