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

什么是数据可视化

1. 数据可视化

• 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
• 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

2. 数据可视化的场景

• 目前互联网公司通常有这么几大类的可视化需求：

3. 常见的数据可视化库

• D3.js目前Web端评价最高的Javascript可视化工具库(入手难)
• ECharts.js百度出品的一个开源Javascript数据可视化库
• Highcharts.js国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
• AntV蚂蚁金服全新一代数据可视化解决方案
• 等等

4. 小结

• 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息
• 数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
• 数据可视化库有很多，接下来我们重点学习ECharts

数据可视化项目概述

1. 项目展示

2. 项目目的

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

• 学习阶段需求：

3. 项目技术

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

4. 小结

• 数据可视化项目展示
• 学习这个项目的目的：市场需求和学习阶段需求
• 项目用到的技术：以前学习过的技术和新技术
• CSS3动画、渐变
• jQuery库+原生JavaScript
• flex布局和rem适配方案
• 图片边框border-image
• ES6模板字符
• ECharts可视化库等等

ECharts简介

1. ECharts简介

• ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网地址：https://www.echartsjs.com/zh/index.html

• 丰富的可视化类型
• 多种数据格式支持
• 流数据的支持
• 移动端优化
• 跨平台使用
• 绚丽的特效
• 详细的文档说明

ECharts的基本使用

1. ECharts使用五步曲

2. 选择不同类型图表

3. 相关配置讲解

• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• toolbox: 工具栏
• grid：直角坐标系内绘图网格
• xAxis：直角坐标系 grid 中的 x 轴
• yAxis：直角坐标系 grid 中的 y 轴
• series: 系列列表。
  • type:类型 (什么类型的图表) 比如 line 是折线 bar柱形等
  • name: 系列名称，用于tooltip的显示，legend的图例筛选变化
  • stack: 数据堆叠。如果设置相同值，则会数据堆叠。
    • 数据堆叠：第二个数据值= 第一个数据值+ 第二个数据值；第三个数据值= 第二个数据值+ 第三个数据值…. 依次叠加
    • 如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
• color：调色盘颜色列表

4. 小结