Echarts教程(一)
一.课程目标
了解大数据可视化技术
- 什么是大数据可视化?
- 数据可视化的应用场景与使用工具
- 数据可视化图表分析之10种场景
掌握Echarts核心组件
- 学会阅读Echarts官方文档并搭建开发环境
- 掌握Echarts核心组件的使用与配置
- 掌握Echarts常用图的制作与注意事项
掌握Echarts高级用法
- 了解Echarts高级组件及使用技巧
- Echarts图表混搭
- 了解异步数据加载
- 了解自定义主题
- 了解事件与行为
了解前后端数据展示
- 了解前后端数据交互的流程及关键步骤
- 通过综合项目案例熟练应用Echarts图表进行数据展示
通过本门课程的学习,能够让我们对数据可视化技术有一个全面、系统、深入的了解,是最终达到能够利用Echarts图表结合后端数据进行前端可视化报表展示的目的,再结合我们课程给出的项目实战综合演练,从而达到熟练使用Echarts的程度,为将来我们的学院面试大数据开发工程师,大数据分析师等工作岗位打下了一个良好的基础,为大大的加分项!
二.数据可视化概述
什么是数据可视化?
概念:数据可视分析是将数据呈现给用户以易于感知的图形符号,让用户交互地理解数据
主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化包含:科学可视化,信息可视化,可视化分析
数据可视化流程:数据接入(格式不同)-->数据整合-->数据处理(过滤掉无用 的数据)-->数据分析-->数据可视化-->更直观的展示给客户
(涉及:大数据、数据分析、可视化技术)
经典可视化案例
大数据可视化价值
1.全方位数据解读数据可视化的过程中,企业可以根据数据的特点,360°全方位的将数据指标和维度进行组合,展现数据趋势。能够帮助企业各部门人员更深入的洞察工作中忽视的问题或者风险,将成功的经验引入分享并总结。
2.企业决策0失误企业决策人员通过分析和讨论数据结果能更快的发现数据的共同契合点,从仅有的数据中挖掘出潜在的商机,快速做出适合企业发展的有效决策。而不是通过以往自身对市场的走势判断来下决定。
3.为企业的每个工作人员提供辅助支持酷屏既可以为实施人员提供面向数据仓库的数据分析和丰富的二次开发接口,还可以为业务人员提供几十种能直接拖拉拽操作生成的大屏模板,也能让研发人员自由灵活的实现个性化功能拓展,实现组件样式或功能不受限。
4.展现企业实力企业在进行对外合作的时候,如果能用大屏展现企业现状和优势,能让合作方对企业的软硬件实力认知有很大提升,从而推进合作进程。
5.节约时间以往在进行每月,年中和年底总结的时候,各部门人员总是要花好几倍的时间去整理海量数据,然后用Excel将数据的某一个维度指标进行展示。当然不是说这种方法不好,但总归是麻烦了一些,而且很难从各个角度去分析,这样的总结分析动辄就是五六十页PPT,实在不利于领导理解工作。
数据可视化工具
1.软件:tableau、sas、R Studio、spss、MathWords
2.在线服务:visual.ly、infogr.am、iCharts、Mapbox
3.JS图表库:Charts.js、echarts(推荐)、FusionCarts
数据可视化书籍:数据可视化之美、鲜活的数据、可视化沟通、图解力、最简单的图形与最复杂的信息
三.快速上手Echarts
Echarts是一款由百度前端技术部开发的一个纯JavaScript图表库,它能够提供直观、生动、可交互的个性定制化的数据可视化图表(开源),你不再是一个读者,你可以参与其中。
Echarts特性介绍
-
深度数据互动可视化
打破单纯地视觉呈现,拥有互动图形用户界面(GUI)的数据可视化。数据呈现不仅是诉说,而是允许用户对所呈现数据进行挖掘、整合,让可视化成为辅助人们进行视觉化思考的方式。
-
Echarts支持的图表
折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)
雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
(拖拽重计算、数据视图、图例开关、数据区域缩放、值域漫游、动态类型切换、多维度堆积、多图联动、混搭)
5分钟上手Echarts
-
第一步:获取Echarts
1.从官网下载界面选择的需要的版本下载:echarts.baidu.com/download.ht…
2.在ECharts的GitHib:github.com/ecomfe/echa…
3.通过npm获取echarts:npm install echarts --save
4.cdn引入:www.bootcdn.cn/echarts/
-
第二步:引入Echarts
-
第三步:绘制一个简单图表
- 引入js代码
Echarts必备基础知识
如何阅读官方文档
ECharts官网:echarts.apache.org/zh/index.ht…
Echarts十大常见图表详解
1.柱状图(Bar Chart)
2.折线图(Line Chart)
3.饼图(Pie Chart)
4.散点图(Scatter Chart)
5.气泡图(Buttle Chart)
6.雷达图(Radar Chart)
7.地图(Map Chart)
8.漏斗图(Funnel Chart)
9.词云(WordCloud Chart)
10.仪表盘(Gauge Chart)
Echarts3.x和Echarts2.x的区别
Echarts基础架构与常见名词术语
- 基础架构
- 基本名词