1.1 什么是数据可视化
数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。
它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。
数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。
优点：
- 把数据以更直观的形式展现 --> 图表
- 清晰有效地传达与沟通信息 -->条形图、饼图、柱状图等
- 隐藏在数据中的信息 -->K线图：可以直观的看出上升以及下降的趋势
1.2 可视化的实现方式
- 报表类（非技术人员）
- Excel
- 水晶报表
- 商业智能BI
- Microsoft BI
- Power-BI
- 编码类（具有编程技术的工程师才能完成）
- ECharts.js（以前是百度的，现在是apache的）
- D3.js（国外的）
1.3 小结
-
数据可视化的概念和作用
- 将数据以图表的形式呈现
- 更有效的传达数据中的信息
-
常见的可视化工具
- 报表类
- BI类
- 编码类
2.1 ECharts的介绍
官网：https://echarts.apache.org/zh
ECharts是一个使用Javascript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据库可视化图表。
特点：
- 开源免费：遵循Apache-2.0 开源协议，免费商用
- 功能丰富：涵盖各行业图表，满足各种需求
- 社区活跃，用户群体多：github https://github.com/apache/echarts
ECharts的特点：
- 丰富的可视化类型（https://echarts.apache.org/examples/zh/index.html）
- 折线图、柱状图、饼图、K线图…
- 只有你想不到，没有它做不到
- 多种数据格式支持
- key-value数据格式
- 二维表
- TypedArray格式
- 流数据的支持
- 流数据的动态渲染
- 增量渲染技术
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 三维可视化
…
- 特性介绍地址：https://echarts.apache.org/zh/feature.html
小结
- ECharts能满足绝大多数可视化图表实现
- 兼容性强
- 使用方便
- 功能强大
- 实现数据可视化的最佳选择之一
2.2 ECharts的快速入门
ECharts使用：
-
引入echarts.js文件：echarts.min.js、jquery.min.js（自行下载）
-
准备一个呈现图表的盒子，div：决定图表呈现在哪个位置
-
初始化一个echarts的实例对象
-
准备配置项（关键：麻烦）
-
将配置项设置给echarts实例对象
展示：
配置项的使用：
-
除了配置项会变化之外，其他代码都是固定的
-
配置项的学习和使用应该参照官方文档和示例
https://echarts.apache.org/zh/api.html
2.3 Echarts的基本使用
简单配置讲解：
xAxis：直角坐标系中的x轴
yAxis：直角坐标系中的y轴
series：系列列表。每个系列通过type决定自己的图表类型
注：配置项太多，无需刻意去记忆
2.4 ECharts的常用图表
七大图表：
- 柱状图
- 折线图
- 散点图
- 饼图
- 地图
- 雷达图
- 仪表盘图
2.4.1 柱状图：series-bar
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
某班期末java成绩如下：
张三：88
李四：95
王五：59
赵六：12
田七：56
钱八：91
孙九：80
苏十：32
展示：
常见效果：
-
标记：最大值（markPoint）、最小值、平均值（markLine）
展示
-
显示：数值显示 柱宽度 横向柱状图
展示
特点：
- 柱状图描述的是分类数据，呈现的是每一个分类中有多少；通过柱状图，可以清晰的看出每个分类数据的排名情况
2.4.2 通用配置
通用配置指的就是任何图表都能使用的配置
-
标题：title
-
文字样式
textStyle
-
标题边框
borderWidth、borderColor、borderRadius（圆角）
-
标题位置
left、top、right、bottom
-
-
提示：tooltip
-
tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
- 触发类型：trigger
item、axis
- 触发时机：triggerOn
mouseover（鼠标移动的时候就会出现详细信息）
click（鼠标点击的时候才会出现详细信息）
-
格式化：formatter，可决定提示框输出的内容
字符串模板
模板变量有 , ，，，，分别表示系列名，数据名，数据值等。 在 trigger 为 的时候，会有多个系列的数据，此时可以通过 , , 这种后面加索引的方式表示系列的索引。 不同图表类型下的 ，，， 含义不一样。 其中变量, , , 在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K线图 : （系列名称），（类目值），（数值）, （无）
- 散点图（气泡）图 : （系列名称），（数据名称），（数值数组）, （无）
- 地图 : （系列名称），（区域名称），（合并数值）, （无）
- 饼图、仪表盘、漏斗图: （系列名称），（数据项名称），（数值）, （百分比）
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
示例：
回调函数示例
-
-
工具按钮：toolbox
toolbox：Echarts提供的工具栏
-
内置有导出图片，数据视图，重置，数据区域缩放，动态类型切换五个工具
-
显示工具栏按钮 feature
saveAsImag、dataView、restore、dataZoom、magicType
-
-
图例：legend
legend：图例，用于筛选系统列，需要和series配合使用
- legend中的data是一个数组
- legend中的data的值需要和series数组中某组数据的name值一致
2.4.3 折线图：series-line
某班期末java成绩如下：
张三：88
李四：95
王五：59
赵六：12
田七：56
钱八：91
孙九：80
苏十：32
展示：
常见效果：
-
标记：最大值（markPoint）、最小值、平均值（markLine）这三个和柱状图一致就不做讲述。下面有代码效果
标注区间：markArea
-
线条控制：平滑 线条风格
smooth、lineStyle
-
填充风格
areaStyle
-
紧挨边缘
boundaryGap：需要配置给类目轴
-
缩放：脱离0值比例，就会从最小的开始
-
堆叠图：stack，基于第一个图之上实现y值的累加
示例
特点：
折线图常用来分析数据随时间变化的趋势
2.4.4 散点图：series-scatter
散点图可以帮助我们推断变量间的相关性
比如身高和体重的关系，一般呈正相关
实现步骤：
-
Echarts最基本的代码结构：引入js文件，DOM容器，初始化对象，设置option
-
x轴数据和y轴数据：二维数组[身高，体重]
-
图表类型
- 在series下设置type:scatter
- xAxis和yAxis的type都要设置为value
-
调整：将坐标轴都设置为脱离0值比例，scale
常见效果：
-
气泡图效果：控制散点的大小和散点的颜色
控制散点的大小：symbolSize
控制散点的颜色：itemStyle
效果如上所示
-
涟漪动画效果：会动的散点图
散点图特点：
- 散点图可以帮助我们推断出不同维度数据之间的相关性
- 散点图也经常用在地图的标注上
2.4.5 直角坐标系的常用配置
直角坐标系图表：柱状图 折线图 散点图
- 网格 grid
- 坐标轴 axis
- 区域缩放 dataZoom
网格 grid
grid 是用来控制直角坐标系的布局和大小
x 轴和 y 轴就是在 grid 的基础上进行绘制的
-
显示grid
-
坐标轴 axis
坐标轴分为x轴和y轴，一个grid中最多有两种位置的x轴和y轴
-
坐标轴类型：type
type：数值轴，自动会从目标数据中读取数据
category：类目轴，该类型必须通过data设置类目数据
-
显示位置：position
xAxis：可取值为 top 或者 bottom
yAxis：可取值为 left 或者 right
-
-
区域缩放 dataZoom
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
-
类型type
slider：滑块
inside：内置，依靠鼠标滚轮或者双指缩放
-
指明产生作用的轴
xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可
-
指明初始状态的缩放情况
-
2.4.6 饼图：series-pie
小明今年在各个购物平台的消费情况：
淘宝：5000
京东：6000
唯品会：2000
得物：4000
-
数据准备：
-
图标类型：在series下设置type: pie
常见效果：
-
显示数值
label.formatter
-
圆环
-
南丁格尔玫瑰图
-
选中效果
饼图特点
- 饼图可以很好的帮助用户快速了解不同分类的数据的占比情况
2.4.7 地图-geo-map
地图图表的使用方式
-
百度地图API
需要申请百度地图ak
-
矢量地图
需要准备矢量地图数据（以下基于矢量地图实现）
矢量地图的实现步骤
-
Echarts最基本的代码结构
-
准备中国的矢量地图json文件，放到json/map/的目录下
china.json
-
使用Ajax获取china.json
-
在回调函数中往Echarts全局对象注册地图的json数据
-
在geo下设置，将chinaMap赋值给map的value
常用配置
-
缩放拖动
-
名称显示
-
初始化缩放的比例
-
地图中心点
-
显示某个区域（具体到市级单位）
- 加载该区域的矢量地图数据
- 通过registerMap注册到echarts全局对象中
- 指明geo配置下的type和map属性
- 通过zoom放大该区域
- 通过center定位中心点
-
不同城市显示不同的的颜色
-
显示基本的中国地图
-
城市的空气质量数据设置给series
-
将series下的数据和geo关联起来
geoIndex:0 (只有一个geo)、type:‘map’
-
结合visualMap配合使用
min
max
inRange
calculable
-
-
地图和散点图结合
-
给series下增加新的对象
-
准备好散点数据，设置给新对象的data
-
配置新对象的type
type:effectScatter
-
让散点图使用地图坐标系统
coordinateSystem: ‘geo’
-
让涟漪动画的效果更加明显
rippleEffect:{
scale: 10
}
-
常见效果
- 缩放拖动、初始缩放比例、中心点
- visualMap和地图的使用
- 散点图和地图的结合
地图特点
- 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
2.4.8 雷达图-series-radar
有两台手机在5个方面的打分数据如下：
华为
易用性 80、功能 90、拍照 70、跑分 92、续航 85
OPPO
易用性 90、功能 80、拍照 90、跑分 70、续航 90
实现步骤
-
Echarts最基本的代码结构
-
定义各个维度的最大值
indicator:[{name: ‘易用性’,max: 100},…]
-
准备具体产品的数据
data:[{name:‘华为’,value:[80,90,70,92,85]},…]
-
图表类型：
在series下设置type:radar
雷达图的特点
雷达图可以用来分析多个维度的数据与标准数据的对比情况
2.4.9 仪表盘图-series-gauge
仪表盘主要用在进度把控以及数据范围的检测
实现步骤
-
Echarts最基本的代码结构
-
准备数据，设置给series下的data
data:[{value: 55}]
-
图表类型：
在series下设置type:gauge
仪表盘特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
3.1 显示相关
3.1.1 主题
内置主题
-
Echarts中默认内置了两套主题：light、dark
-
在初始化对象方法init中可以指明
var chat = echarts.init(dom,‘light’);
var chat = echarts.init(dom,‘dark’);
自定义主题
-
在主题编辑器中编辑主题：https://echarts.apache.org/zh/theme-builder.html
-
下载主题，是一个js文件
-
引入主题js文件
-
在init方法中使用主题（ps：传入的第二个参数名字不取决于js文件名）
3.1.2 调色盘
它是一组颜色，图形、系列会自动从其中选择颜色
-
主题调色盘
-
全局调色盘：如果配置了会覆盖主题中的调色盘
-
局部调色盘：如果设置了会覆盖全局调色盘
-
调色盘的作用遵循就近原则
3.1.3 颜色渐变
-
线性渐变
-
径向渐变
3.1.4 样式
-
直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
例：
-
高亮样式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
样式的优先级高，会覆盖主题中调色盘的效果
3.1.5 图标自适应实现
当浏览器的大小发生变化是，如果想让图表也能随之适配变化
- 监听窗口大小变化的事件
- 在时间处理函数中调用Echarts实例对象的resize即可
3.2 动画的使用
3.2.1 图表加载动画的实现
Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可
-
显示加载动画
mCharts.showLoading()
-
隐藏加载动画
mCharts.hideLoading()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-07ipQGnu-1677636577150)(C:UserskevinAppDataRoamingTypora ypora-user-imagesimage-20230227114547190.png)]
3.2.2 图表增量动画
-
mCharts.setOption()
3.2.3 图表动画的配置项
-
开启动画
animation:true
-
动画时长
animationDuration:5000 //以毫秒为单位，支持回调函数
-
缓动动画
-
动画阈值，单种形式的元素数量大于这个阈值就会关闭动画
3.3 交互API
3.3.1 全局的Echarts对象
全局echarts对象是引入echarts.js文件之后就可以直接使用的
例如：echarts.init()方法中的init
-
init：初始化echarts实例对象；使用主题
-
registerTheme：自定义主题时使用，注册主题（只有注册过的主题，才能在in）
-
registerMap：注册地图数据；geo组件使用地图数据
-
connect：
-
一个页面中可以有多个独立的图表
-
每一个图表对应一个Echarts实例对象
-
connect可以实现多个图表进行关联，传入联动目标为Echarts实例对象，支持数组
-
使用场景：
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等
-
3.3.2 echartsInstance对象：通过全局的echarts对象方法调用之后得到的
例如：mEcharts
-
setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOpion方法：合并新的配置项和旧的配置项（增量动画实现处使用过）
-
resize
- 重新计算和绘制图表
- 一般和window对象的resize事件结合使用（图表自适应处使用过）
-
onoff
on
-
绑定或者解绑事件处理函数
-
鼠标事件
常见事件：‘click’、‘dblclick’、‘mousedown’等
事件参数arg：和事件相关的数据信息
-
Echarts事件
legendselectchanged、dataZoom
事件参数arg：和事件相关的数据信息
off
-
-
dispatchAction
- 触发某些行为
- 使用代码模拟用户的行为：点击按钮进行图表高亮展示等
-
clear
- 清空当前实例，会移除实例中所有的组件和图表
- 清空之后可以再次setOption()