数据可视化

概念

指将数据转换为图形，揭示蕴含在数据中的规律和道理

运用场景

通用报表、移动端图表、大屏可视化

常见数据可视化库

D3.js - web端评价最高JavaScript可视化工具库，但入手难

ECharts.js - 开源JavaScript数据可视化库

Highcharts.js - 国外前端数据可视化库

AntV

数据可视化项目

具有市场、对知识点承上启下，过渡学习阶段

Echarts

官网地址：Apache ECharts

JavaScript的开源可视化库，依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性定制的数据可视化图表

ECharts 使用五步曲

1. 下载并引入echarts.js文件--图表依赖的js库

   <script src="js/echarts.min.js"></script>

2. 准备一个具备大小的DOM容器--生成的图标放在该容器内

   .box{
       width: 400px;//必须说明宽高
       height: 400px;
       background-color: pink;
   }

3. 初始化echarts实例对象

   var mychart =  echarts.init(document.querySelector('.box'));

4. 指定配置项和数据--根据具体需求修改配置

           var option = {
                   title: {
                   text: 'ECharts 入门示例'
                   },
                   tooltip: {},
                   legend: {
                   data: ['销量']
                   },
                   xAxis: {
                   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                   },
                   yAxis: {},
                   series: [
                   {
                       name: '销量',
                       type: 'bar',
                       data: [5, 20, 36, 10, 10, 20]
                   }
                   ]
           }; 

5. 将配置项设置给echarts实例对象

   myecharts.setOption(option);

ECharts的相关配置

1. title：图表的标题

2. tooltip：提示

3. legend：图例组件

4. toolbox：工具栏

5. grid：直角坐标系内绘图网格--通过·left、rigjt、bottom修改网格的大小，containLabel设置网格区域是否包含刻度标签

6. xAxis：直角坐标系中的x轴--boundaryGap设置留白

7. yAxis：直角坐标系中的y轴

8. color：调色盘颜色列表

9. series：系列列表

   1. type：类型--决定什么类型的图表

   2. name：系列名称

   3. stack：数据堆叠

   4. center：设置图形位置

   5. radius：设置图形大小

   6. roseType：以半径（radius）或者面积（area）的方式展示

   7. color：饼图颜色

   8. label：文字大小

   9. labelLine：引导线的样式

数据可视化项目适配方案

项目需求

页面-浏览器实现PC端适配：在1024-1920之间页面元素宽高自适应

方案--flexible.js插件+rem单位+flex布局

1. 确定flexible.js要把屏幕划分为几等份

2. 设置cssrem插件的基准值

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

引入相关代码

    <link rel="stylesheet" href="css/项目页面.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/jquery.min.js"></script>

核心思路：先布局，再利用ECharts填充图表

利用flex布局

补充：边框图片

1. 边框图片的使用场景

   盒子大小不一，但是边框的样式相同，需要借助边框图片来完成

2. 边框图片的切图原理

   四刀九块--九宫格，切出四个角

3. 边框图片语法规范

   1. boder-image-source：用再边框的图片路径

   2. boder-image-slice：图片边框向内偏移（裁剪的尺寸，一定不加单位、上右下左顺序）

   3. border-image-width：图片的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）

   4. border-image-repeat：图像边框是否应该平铺（repeat）、铺满（round）、拉伸（stretch）默认拉伸

调用字体图标--通过类名

无缝滚动原理

1. 先克隆marquee里面所有的行（row）

2. 听过CSS3动画滚动marquee

3. 鼠标经过marquee就停止动画：animation-play-state：paused；