什么是数据可视化
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:调色盘颜色列表