【高级课程笔记】—— Echarts高级应用（一）

一、多坐标轴

多坐标轴的常见应用就是一个坐标系有两个y 轴

多坐标轴的设置方法：

• 在yAxis 中写入两组数据，让两组数据的行数保持一致
• 在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联

二、异步数据(数据更新)

对于请求数据的方式，ajax、fetch 都可以，这是js 基础，就不再多说

数据的更新有两种思路：

1. 请求到数据后，setOption()
2. 先setOption()，有什么配置什么。请求到数据后，再追加配置

注：在数据加载的过程中，还可以使用loading

1. 显示 loading：showLoading()

2. 隐藏 loading：hideLoading()

有一个报错：　　

跨域资源共享问题，资源存放在本地也就是file://这样的系统下，而不是网络资源比如http://。

所以造成了这些框架可能找不到对应的资源，需要把其部署成网站(web服务)即可

三、数据集 dataset

dataset 数据集组件是从ECharts 4 开始有的，用于数据管理。

• 将数据写在每个series 系列中的方法，有以下缺陷：

1. 不适合数据处理
2. 不利于多个系列共享一份数据
3. 不利于基于原始数据进行图表类型、系列的映射安排

• dataset 的优点：

1. 基于原始数据，设置映射关系，形成图表。
2. 数据和配置分离，便于单独管理。
3. 数据可以被多个系列或者组件复用。
4. 支持更多的数据的常用格式，例如二维数组、对象数组等。

数据集的理解方式：

数据源的数据类型可以是 数组 或 对象数组

　

数据集的行列映射：

• seriesLayoutBy：行列映射方式，会影响系列的划分方式

1. column：基于列映射，默认
2. row：基于行映射

　

数据集的维度映射：

作用：定义数据的维度信息。

ECharts 默认会从 dataset.source 的第一行/列中获取维度信息。

但是，如果在dataset.source 里指定了 dimensions，那么 ECharts 不再会自动从 dataset.source 中获取维度信息。

• 全局维度：dimensions写在dataset 中，作用于所有系列
• 局部维度：dimensions写在series 系列中，作用于其所在的系列

 

 dimensions 中元素的书写方式：

　

数据集的encode 编码映射：

encode 可以定义数据的哪个维度被编码成什么。

默认series 里第一个系列对应的就是数据源里的第二列数据。后面的以此类推。

• encode 常见属性： 

1. tooltip：['product', 'score‘]，提示信息
2. seriesName：[1, 3]，系列名
3. x：x 轴的数据映射
4. y：y 轴的数据映射

四、区域缩放 dataZoom

作用：概览整体，观察细节

dataZoom 组件的类型：

1. 内置型数据区域缩放组件(dataZoomInside)：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。
2. 滑动条型数据区域缩放组件(dataZoomSlider)：有单独的滑动条，用户在滑动条上进行缩放或漫游。
3. 框选型数据区域缩放组件(dataZoomSelect)：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。

---

 注：课程来自开课吧