Apache Echarts 自学笔记 7. 概念篇 - 【数据集】 7.3 数据到图形的映射

旧城等待， 2024-03-27 16:47 33阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][50a70473f290468a9da0e3ec3b325a78.png_pic_center]
> 
> 如侵立删

##### 7. 概念篇 - 【数据集】 #####

###### 7.3 数据到图形的映射 ######

如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。

简而言之，可以进行这些映射的设定：

*  指定 `数据集` 的列（column）还是行（row）映射为 `系列（series）`。这件事可以使用 [series.seriesLayoutBy][] 属性来配置。
    
    ![在这里插入图片描述][2fbded7139eb40ed8c89940a86799a02.png_pic_center]
    
    默认是按照列（column）来映射。
 *  指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 [series.encode][] 属性，
    
    ![在这里插入图片描述][56ad98cea74d45ee83badfdcfa10f4fe.png_pic_center]
    
    以及 [visualMap][] 组件来配置（如果有需要映射颜色大小等视觉维度的话）。
    
    ![在这里插入图片描述][34a0df475cd64af081744c6e1a18e4eb.png_pic_center]
    
    上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 `dataset.source` 中的第一列；三个柱图系列，一一对应到 `dataset.source` 中后面每一列。

之后会详细解释这些映射的设定。

[50a70473f290468a9da0e3ec3b325a78.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b02699c6d8d34ad4b5dbb0ca2a4db617.png
[series.seriesLayoutBy]: https://echarts.apache.org/option.html#series.seriesLayoutBy
[2fbded7139eb40ed8c89940a86799a02.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9b87979831e24cc58f29a67bb2b4d14e.png
[series.encode]: https://echarts.apache.org/option.html#series.encode
[56ad98cea74d45ee83badfdcfa10f4fe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3769162163b945c9a72029c2c512d8b5.png
[visualMap]: https://echarts.apache.org/option.html#visualMap
[34a0df475cd64af081744c6e1a18e4eb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4d0c287406164acc8c59d3e1deaa8a6f.png