本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization数据集介绍：
数据集组件（dataset）是专门用于管理数据的组件。
之前的操作中是在每个数据系列中设置数据（series.data）：
1 // 在数据系列中设置数据
2 series: [{
3 name: "2000年",
4 type: "bar",
5 data: [5, 35, 25, 15, 45]
6 }, {
7 name: "2001年",
8 type: "bar",
9 data: [15, 45, 35, 20, 35]
10 }, {
11 name: "2002年",
12 type: "bar",
13 data: [10, 25, 15, 25, 40]
14 }]
15 };
这种方式的优点是，适于对一些特殊的数据结构进行一定的数据类型定制。但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。
因此，更推荐使用数据集来管理数据。这样数据就可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。
主要使用以下两个参数：
| 参数 |
描述 |
source |
原始数据。一般来说，原始数据表达的是二维表。可以用如下三种格式表达二维表 |
dimensions |
定义 series.data 或者 dataset.source 的每个维度的信息 |
1 // 在数据集中设置数据
2 // 可以使用“二维数组”的格式
3 dataset:{
4 // 设置数据
5 source:[
6 // 第一行/列可以给出 维度名
7 ["品类","2000年","2001年","2002年"],
8 ["品类1",5,15,10],
9 ["品类2",35,45,25],
10 ["品类3",25,35,15],
11 ["品类4",15,20,25],
12 ["品类5",45,35,40],
13 ]
14 },按行的 key-value 形式（对象数组）设置数据，其中键（key）表明了 维度名：
1 // 也可以使用按行的 key-value 形式（对象数组），其中键（key）表明了 维度名
2 dataset:{
3 // dimensions:["品类","2000年","2001年","2002年"],
4 source:[
5 {"品类":"品类1","2000年":5,"2001年":15,"2002年":10},
6 {"品类":"品类2","2000年":35,"2001年":45,"2002年":25},
7 {"品类":"品类3","2000年":25,"2001年":35,"2002年":15},
8 {"品类":"品类4","2000年":15,"2001年":20,"2002年":25},
9 {"品类":"品类5","2000年":45,"2001年":35,"2002年":40},
10 ]
11 },
按列的 key-value 形式设置数据，每一项表示二维表的 “一列”：
1 // 也可以使用按列的 key-value 形式，每一项表示二维表的 “一列”
2 dataset:{
3 dimensions:["品类","2000年","2001年","2002年"],
4 source:{
5 "品类":["品类1","品类2","品类3","品类4","品类5"],
6 "2000年":[5,35,25,15,45],
7 "2001年":[15,45,35,20,35],
8 "2002年":[10,25,15,25,40],
9 },
10 },
将数据集映射为系列：
有了数据表之后，可以灵活地配置数据到图形的映射关系。
-
把数据集（dataset）的行或列映射为系列（series）：
series中的seriesLayoutBy 来指定 数据集 的列（column）还是行（row）映射为 系列（series），默认是按照列（column）来映射。| 参数 |
描述 |
seriesLayoutBy |
当使用 dataset 时，seriesLayoutBy 指定了 dataset 中用行还是列对应到系列上，也就是说，系列“排布”到 dataset 的行还是列上。可取值：
|
-
指定维度映射：
如需从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap），可以使用 series中的encode 以及 visualMap 组件来配置（如果有需要映射颜色大小等视觉维度的话）。
encode 声明的基本结构如下：
1// 在任何坐标系和系列中，都支持：
2encode: {
3 // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
4 tooltip: ['product', 'score']
5 // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
6 seriesName: [1, 3],
7 // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
8 itemId: 2,
9 // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
10 itemName: 3
11}
12
13// 直角坐标系（grid/cartesian）特有的属性：
14encode: {
15 // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
16 x: [1, 5, 'score'],
17 // 把“维度0”映射到 Y 轴。
18 y: 0
19}
20
21// 单轴（singleAxis）特有的属性：
22encode: {
23 single: 3
24}
25
26// 极坐标系（polar）特有的属性：
27encode: {
28 radius: 3,
29 angle: 2
30}
31
32// 地理坐标系（geo）特有的属性：
33encode: {
34 lng: 3,
35 lat: 2
36}
37
38// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
39encode: {
40 value: 3
41}
其中，冒号左边是坐标系、标签等特定名称，如 'x', 'y', 'tooltip' 等；冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。
示例：
本次使用同一个数据集（dataset）不同的映射方式绘制图形：
1 // 设置图表的参数
2 var option = {
3 title: {},
4
5 tooltip: {},
6
7 legend: {show:false},
8
9
10 // 在数据集中设置数据
11 // 可以使用“二维数组”的格式
12 dataset:{
13 // 设置数据
14 source:[
15 // 第一行/列可以给出 维度名
16 ["品类","2000年","2001年","2002年"],
17 ["品类1",5,15,10],
18 ["品类2",35,45,25],
19 ["品类3",25,35,15],
20 ["品类4",15,20,25],
21 ["品类5",45,35,40],
22 ]
23 },
24
25 // 也可以使用按行的 key-value 形式（对象数组），其中键（key）表明了 维度名
26 // dataset:{
27 // // dimensions:["品类","2000年","2001年","2002年"],
28 // source:[
29 // {"品类":"品类1","2000年":5,"2001年":15,"2002年":10},
30 // {"品类":"品类2","2000年":35,"2001年":45,"2002年":25},
31 // {"品类":"品类3","2000年":25,"2001年":35,"2002年":15},
32 // {"品类":"品类4","2000年":15,"2001年":20,"2002年":25},
33 // {"品类":"品类5","2000年":45,"2001年":35,"2002年":40},
34 // ]
35 // },
36
37 // 也可以使用按列的 key-value 形式，每一项表示二维表的 “一列”
38 // dataset:{
39 // dimensions:["品类","2000年","2001年","2002年"],
40 // source:{
41 // "品类":["品类1","品类2","品类3","品类4","品类5"],
42 // "2000年":[5,35,25,15,45],
43 // "2001年":[15,45,35,20,35],
44 // "2002年":[10,25,15,25,40],
45 // },
46 // },
47
48 // 设置三个网格
49 grid:[{
50 top:"2.5%",
51 bottom:"72.5%",
52 },{
53 top:"37.5%",
54 bottom:"37.5%",
55 },{
56 top:"72.5%",
57 bottom:"2.5%",
58 }],
59
60 // 多个x轴
61 xAxis: [{
62 type:"category",
63 gridIndex:0,
64 },{
65 type:"category",
66 gridIndex:1,
67 },{
68 gridIndex:2,
69 }],
70
71 // 多个y轴
72 yAxis: [{
73 gridIndex:0,
74 },{
75 gridIndex:1,
76 },{
77 type:"category",
78 gridIndex:2,
79 }],
80
81 // 在数据系列中设置数据
82 // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列
83 series: [
84
85 // 将数据集（dataset）的 行（row） 映射为系列（series）
86 {type: "bar" , seriesLayoutBy:"row"},
87 {type: "bar" , seriesLayoutBy:"row"},
88 {type: "bar" , seriesLayoutBy:"row"},
89 {type: "bar" , seriesLayoutBy:"row"},
90 {type: "bar" , seriesLayoutBy:"row"},
91
92 // 默认为将数据集（dataset）的 列（column） 映射为系列（series）
93 {type: "bar",xAxisIndex:1,yAxisIndex:1},
94 {type: "bar",xAxisIndex:1,yAxisIndex:1},
95 {type: "bar",xAxisIndex:1,yAxisIndex:1},
96
97 // 将 第二 列映射到 X 轴。
98 // 将 "品类" 列映射到 Y 轴。
99 {type: "bar",xAxisIndex:2,yAxisIndex:2 , encode:{x:1 , y:"品类"}},
100 ]
101 };
图表效果如下所示，其中，
第一张图：将数据集（dataset）的 行（row） 映射为系列（series）；
第二张图：将数据集（dataset）的 列（column） 映射为系列（series）；
第三张图：将 第二 列映射到 X 轴，将 “品类” 列映射到 Y 轴。
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
