Echarts教程
一、可视化技术概述与Echarts入门
课程目标
- 了解大数据可视化技术
- 掌握Echarts核心组件
- 掌握Echarts高级用法
- 了解前后端数据展示
数据可视化概述
什么是数据可视化?
数据可视化借助于图形化手段，清晰有效的传达与沟通信息。
数据可视化又分为可视化分析、信息可视化、科学可视化。
可视化分析是信息可视化和科学可视化的产物，侧重于借助于交互式，用户页面进行的分析推理。
信息可视化是将数据信息和知识转化为一种视觉形式，充分利用人们对可视模式快速识别的自然能力。
科学可视化是主要关注于三维现象的可视化，如气象学，生物学，重点对于体、面以及光源的等等渲染。（医疗，航天）
数据可视化的演变历程：科学可视化 ——>信息可视化——>可视化分析
经典可视化案例
百度统计 国家数据 世界银行 百度人气地图 淘宝指数
大数据可视化的价值
对于企业：
- 预测未来，发现有效的信息，传递到决策者手中。
- 数据可视化能够快速的发现数据的趋势，预测未来，降低风险。
- 能够设定精准广告投放。
- 大数据可视化获取的信息非常快，可以让我们提前发现商机。
数据可视化工具、案例、书籍
工具：
软件的区分：
- Power Bi -Tableau
- sas
- RStudio
- spss
- MathWorks 在线服务区分：
- Visual.ly
- icharts
- mopbox Js图标库区分：通过编码编程的方式进行可视化的传递，功能相比前两者强大
- echarts（是一项技术，并不是工具）
- Flot Chart.js
- FusionCharts
案例：
- 地图可视化
- 新闻可视化
- D3可视化
- 移动端可视化
书籍：
- 数据可视化之美
- 鲜活的数据
- 可视化沟通
- 图解力
- 最简单的图形与最复杂的信息
Echarts概述
Echarts是有一款由百度前端技术开发的，基于javascript开发的一种数据可视化的图表库，能够提供直观、生动可交互可个性数据可视化图标。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
Echarts特性介绍
- 拖拽重计算
- 数据视图，满足用户对数据的需求
- 动态类型切换，尝试不同类型的图表展现
- 值域漫游，聚焦到你所关心的数值上
- 数据区域缩放，聚焦到你所关心的数值上
- 多图联动，更友好的关联数据分析
- 百搭时间轴，时间维度拓展
- 大规模散点，展现大数据的魅力
- 力导向布局，复杂关系网络的最美呈现
- 动态数据的添加，实时展现数据的变化
- 多维度图例开关，切换你所关心的数据系列
- 多维度堆积图，展现更具内涵的统计图表
- 商业BI,一些广泛应用的商务图表
- 混搭，用最佳的组合方式展现你独特的数据
- 高度个性化能力，释放你的创造力
- 特效，吸引眼球的能力
如何快速上手开发一个Echarts可视化图标
- 获取Echarts
- 在官网下载Echarts版本
- 引入Echarts
- 绘制一个简单的图表，创建一个dom元素
- 在html后面放一段代码，配置Echarts属性
如何阅读Echarts官方文档
查看API
Echarts学习必备基础知识
Javascript(50%) Jquery(20%) Json(10%) Html(10%) css(10%)
Echarts3.x与Echarts2.x的区别
- Echarts2.x是通用的版本。
- Echarts2.x版本的文档实例比Echarts3.x版本的文档实例要好，更加清晰，更加容易理解。
- Echarts2.x版本做的图表更炫酷。
- Echarts2.x代表的是现在，而Echarts3.x代表的是未来。
- Echarts3.x对Echarts的引用更灵活，更简单，方便。
Echarts基础架构与常见名词术语
基础架构：
- 基础库（zrender canvas类库）
- 组件模块（坐标 网格 极坐标 标题 提示 数据区域缩放 工具箱 值域漫游）
- 图类模块（柱状图 折线图 饼图 散点图）
- 接口模块、
名词术语
- chart:完整的图标，就是一个js对象
- axis：坐标轴，类目型
- xAxis:横轴，数值型
- yAxis:纵轴
- grid:网格
- series:数据系列
- tooltip:气泡框，常用于详细的数据
- line:折线图
- bar：柱状图
- pie:饼状图
- map:地图
- scatter:散点图
- guage:仪表盘
- radar:雷达图
