- 1. 什么是数据可视化
- 1.1 数据可视化
- 主要目的:借助于图形化手段,清晰有效地传达与沟通信息
- 可以把数据从冰冷的数字转成图形,揭示蕴含在数据中的规律和道理
- 1.2 数据可视化的场景
- 通用报表
- 移动端图表
- 大屏可视化
- 图编辑&图分析
- 地理可视化
- 1.3 常见的数据可视化库
- D3.js目 前Web端评价最高的Javascript可视化工具库(入手难)
- ECharts.js 百度出品的一个开源Javascript 数据可视化库
- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- 用AntV蚂蚁金服全新--代数据可视化解决方案
- 等等
- 1.1 数据可视化
- 2. 数据可视化项目概述
- 2.1项目技术
- HTML5+CSS3布局
- CSS3动画、渐变
- jQuery库+原生JavaScript
- flex布局和rem适配方案
- 图片边框border-image
- ES6模板字符
- ECharts可视化库
- 2.1项目技术
- 3. ECharts简介
- echarts是一个使用JavaScript实现的开源可视化库,可以流畅地运行在PC和移动设备上,兼容当前绝大部分浏览器,底层依赖矢量图库ZRender,提供直观交互丰富,可高度个性化定制的数据可视化图表
- 官网地址:http://www.echartsjs.com/zh/index.html
- 4. ECharts的基本使用
- 4.1 ECharts使用五部曲
- 步骤一:下载并引用echarts.js文件
- 步骤二:准备一个具备大小的DOM容器
- 步骤三:初始化ECharts实例对象
- 步骤四:指定配置和数据
- 步骤五:将配置项设置给echarts实例对象
- 4.2 相关配置讲解
- 查阅相关文档--配置项手册
- title:标题组件
- tooltip:提示框组件
- legend:图例组件
- toolbox:工具栏
- grid:直角坐标系内绘图网格
- xAxis:直角坐标系grid中的x轴
- yAxis:直角坐标系grid中的y轴
- series:系列列表。每个系列通过type决定自己的图表类型
- type图表类型
- name系列名称 用于tooltip显示,legend的图例筛选变化
- stack数据堆叠 名称不同或删除不会堆叠
- color:调色盘颜色列表
- 查阅相关文档--配置项手册
- 4.1 ECharts使用五部曲
PINK老师笔记