数据可视化项目

一、学习目标

• 能够说出数据可视化的目的
• 能够说出ECharts
• 能够独立使用echarts完成可视化项目开发

二、目录

1. 什么是数据可视化
2. 数据可视化项目概述
3. ECharts简介
4. ECharts的基本使用
5. 数据可视化项目开发

1.什么是数据可视化

1.1数据可视化

数据可视化主要目的：借助图形化手段，清晰有效的传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

1.2数据可视化场景

通用报表，                  移动端图标，             大屏可视化，         图编辑&图分析， 地理可视化

 1.3常见的数据可视化库

• D3.js  目前Web端评价最高的Javascript可视化工具库（入手难）
• ECharts.js  百度出品的一个开源Javascript数据可视化库
• Highcharts.js  国外的前端数据可视化库，非商用免费

2.数据可视化项目概述

2.1项目展示

2.2项目目的

 市场需求：

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

学习阶段需求：

承上：复习以前学过的内容;启下：为学习服务器编程做铺垫。

2.3项目技术

• HTML5+CSS3布局
• CSS3动画.渐变
• Jquery库+原生Javascript
• flex布局和rem适配方案
• 图片边框border-image
• ES6模板字符
• ECharts可视化库等等

3.ECharts简介

ECharts是一个javascript插件库，需要引入到页面，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

4.ECharts基本使用

4.1ECharts使用五部曲

1. 下载并引入echarts.js文件
2. ECharts 安装 | 菜鸟教程 (runoob.com)
3. 准备一个具备大小的DOM容器（生成的图表会放入这个容器内）

4.  .box {
               width: 400px;
               height: 400px;
               background-color: pink;
           }

5. 初始化Echarts实例对象（实例化echarts对象）

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

7. 指定配置项和数据（option）（根据具体需求修改配置选项）

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

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

myChart.setOption(option);

4.2相关配置讲解

 

 grid:{

containLabel:true;
//当刻度标签溢出的时候，grid区域是否包含坐标轴的刻度标签。如果为true，则显示
//如果left，right等设置为0%刻度标签就会溢出了，此时决定是否显示刻度标签

}

 

 

 

 三、数据可视化项目适配方案

3.1项目需求

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

1. flexible.js把屏幕分为24等份
2. cssrem插件的基准值是80px，插件-配置按钮--配置扩展设置--Root Font Size里面设置。但是别忘记重启vscode软件保证生效
3. 要把屏幕宽度约束在1024-1920之间有适配，实现代码：

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

3.2数据可视化项目开发

 项目核心：先布好局，之后利用ECharts填充图标

 3.3边框图片

1. 边框图片的使用场景（边框是一个样式的，但是无法通过css样式编写，而且大小不一样，只能用边框图片）
2. 边框图片的切图原理
3. 边框图片的语法规范

 为了实现丰富多彩的边框效果，在CSS3中，新增了border-image属性，这个新属性允许指定一幅图像作为元素的边框。 

 

2.边框图片切图原理：（重要）

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。

3.边框图片的使用语法（重要）

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

 步骤：1.现将图片资源引入：border-image-source: url(images/border.jpg);

2.然后将图片的四个角切出去，中间部分将会拉长：border-image-slice: 205 205 205 205;（border-image-slice: 205 ；）

3.设置图片边框的宽度： border-image-width: 30px;（这个属性默认的是border的宽度，但是有区别，这个边框图片的宽度不会挤压文字）

4.设置边框图片的排列方式：border-image-repeat: round;（默认为拉伸状态）

4.公共面板样式开发

出现的错误：当我们给容器设置了边框之后，里面的内容就不会对齐显示。我们可以给一个子容器，通过设置绝对定位（父绝子相），默认的是与内容对齐，我们可以设置top、left、right、bottom扩大范围，与父容器大小相同，再给一个padding值，将其内容归位.

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

1. HTML页面引入字体图标中css文件
2. 标签直接调用图标对应的类名就可。（类名在css文件中标注）
3. 引入CSS文件和声明文体图标的时候，一定注意路径问题

6.无缝滚动原理

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

6.2通过CSS3动画滚动marquee

6.3鼠标经过marquee就停止动画；

animation-play-state:paused;