本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在【8.ECharts组件——数据集dataset】中已经对ECharts中的数据管理器dataset做过简要介绍，本次主要介绍下dataset中的数据转换功能，该功能可以在ECharts中对数据做一些简单的处理工作。
在ECharts中，“数据转换” 就是给定一个已有的“数据集”（dataset）和一个“转换方法”（transform），从而生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。
| 配置项 |
说明 |
| type |
数据转换方法 |
| config |
筛选条件 |
| print |
该配置项用于debug ，只在开发环境中生效。 配置为`true`后，transform的结果会 被console.log 打印出来。 |
| fromDatasetIndex |
指定dataset.transform以哪个dataset作为输入。如果dataset.transform被指定了，但是fromDatasetIndex和fromDatasetId都没有被指定，那么默认会使用fromDatasetIndex: 0 |
| fromDatasetId | 指定dataset.transform以哪个dataset作为输入 |
ECharts内置的数据转换方法主要为以下两个：
-
filter：用于根据筛选条件过滤数据。
-
sort：用于排序数据。目前主要用于在类目轴（axis.type: ‘category’）中显示排过序的数据。
使用该转换器时，只需声明transform.type: “filter”，以及在config中给出数据筛选条件即可。
-
config中的配置项：
config中的一些配置项如下所示：
| 配置项 |
说明 |
| 维度dimension | 用于指定用于数据转换的维度，可以设置成dataset中的维度名称或者维度index |
| 关系比较操作符 |
关系操作符： >（gt）、>=（gte）、<（lt）、<=（lte）、=（eq）、!=（ne、<>）、reg； 逻辑比较操作符：与或非（ and | or | not ）； |
| 解析器parser |
指定“解析器”（parser）来对值进行解析后再做比较。现在支持的解析器有：
|
1 dataset: [{
2 source: [ ... ] // 原始数据
3 }, {
4 // 几个 transform 被声明成 array ，他们构成了一个链，
5 // 前一个 transform 的输出是后一个 transform 的输入。
6 transform: [{
7 type: 'filter',
8 config: { dimension: 'Product', value: 'Tofu' }
9 }, {
10 type: 'sort',
11 config: { dimension: 'Year', order: 'desc' }
12 }]
13 }]
-
示例：
代码如下所示：
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 ["品类", "销量", "单价", "日期"],
17 ['品类1', 311, 21, '2012-05-12'],
18 ['品类2', 135, 28, '2012-05-22'],
19 ['品类3', 262, 36, '2012-06-02'],
20 ['品类4', 359, 21, '2012-06-22'],
21 ['品类5', 121, 28, '2012-07-02'],
22 ['品类6', 271, 36, '2012-08-22'],
23 ]
24 }, {
25 // 基于原始数据进行数据转换
26 transform: {
27 type: 'filter',
28 // 首先将维度'日期' 中的原始值解析成时间戳（ timestamp ）后再筛选出2012-05至2012-07间的数据
29 config: { dimension: '日期', '>=': '2012-05', '<=': '2012-07', parser: 'time' },
30 print: true,
31 }
32 }, {
33 // 基于datasetIndex为1的数据再次进行数据转换
34 fromDatasetIndex: 1,
35 transform: {
36 type: 'filter',
37 // 筛选出维度'销量'大于等于150的数据
38 config: { dimension: '销量', '>=': 150 },
39 print: true,
40 }
41 }, {
42 // 链式声明 transform
43 transform: [{
44 type: 'filter',
45 config: { dimension: '日期', '>=': '2012-05', '<=': '2012-07', parser: 'time' },
46 print: true,
47 }, {
48 type: 'filter',
49 config: { dimension: '销量', '>=': 150 },
50 print: true,
51 }]
52 }],
53
54 // 设置三个网格
55 grid: [{
56 top: "2.5%",
57 bottom: "72.5%",
58 }, {
59 top: "37.5%",
60 bottom: "37.5%",
61 }, {
62 top: "72.5%",
63 bottom: "2.5%",
64 }],
65
66 // 多个x轴
67 xAxis: [{
68 type: "category",
69 gridIndex: 0,
70 }, {
71 type: "category",
72 gridIndex: 1,
73 }, {
74 type: "category",
75 gridIndex: 2,
76 }],
77
78 // 多个y轴
79 yAxis: [{
80 gridIndex: 0,
81 }, {
82 gridIndex: 1,
83 }, {
84 gridIndex: 2,
85 }],
86
87 // 在数据系列中设置数据
88 series: [
89
90 // datasetIndex为1
91 { type: "bar", datasetIndex: 1 },
92 { type: "bar", datasetIndex: 1 },
93 { type: "bar", datasetIndex: 1 },
94
95 // datasetIndex为2
96 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
97 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
98 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
99
100 // datasetIndex为3
101 { type: "bar", datasetIndex: 3, xAxisIndex: 2, yAxisIndex: 2 },
102 { type: "bar", datasetIndex: 3, xAxisIndex: 2, yAxisIndex: 2 },
103 { type: "bar", datasetIndex: 3, xAxisIndex: 2, yAxisIndex: 2 },
104 ]
105 };
可视化结果如下图所示：
“sort” 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ axis.type: ‘category’ ）中显示排过序的数据。使用该转换器时，只需声明transform.type: “sort”，以及在config中给出排序规则即可。
数据转换器 “sort”的排序规则如下：
-
默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。
-
对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。
-
当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 incomparable: ‘min’ | ‘max’ 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 null, undefined, NaN, ”, ‘-‘）在排序的头还是尾。
另外，过滤器 filter: ‘time’ | ‘trim’ | ‘number’ 可以被使用，和数据转换器 “filter” 中的情况一样。如果要对时间进行排序我们需要声明 parser: ‘time’。如果需要对有后缀的数值进行排序（如 ‘33%’, ’16px’）我们需要声明 parser: ‘number’。
另外，数据转换器 “sort”可以多重排序，即对多个维度一起排序。
-
示例：
代码如下所示：
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 ["品类", "销量", "分类", "日期"],
17 ['品类1', 311, 'shoe', '2012-05-12 8:00'],
18 ['品类2', 135, 'shoe', '2012-05-12 9:00'],
19 ['品类3', 262, 'shirt', '2012-05-12 10:00'],
20 ['品类4', 359, 'pants', '2012-05-12 11:00'],
21 ['品类5', 121, 'shirt', '2012-05-12 12:00'],
22 ['品类6', 271, 'pants', '2012-05-12 13:00'],
23 ]
24 }, {
25 transform: {
26 type: 'sort',
27 // 对维度'淘宝销量' 进行升序排列，降序排列设置为 desc
28 config: { dimension: '销量', order: 'asc' },
29 print: true,
30 }
31 }, {
32 transform: {
33 type: 'sort',
34 // 首先将维度'日期' 中的原始值解析成时间戳（ timestamp ）后再进行降序排列
35 config: { dimension: '日期', order: 'desc', parser: 'time' },
36 print: true,
37 }
38 }, {
39 transform: [{
40 type: 'sort',
41 // 多维度排序
42 config: [
43 { dimension: '分类', order: 'asc' },
44 { dimension: '销量', order: 'asc' },
45 ],
46 print: true,
47 }]
48 }],
49
50 // 设置三个网格
51 grid: [{
52 top: "2.5%",
53 bottom: "72.5%",
54 }, {
55 top: "37.5%",
56 bottom: "37.5%",
57 }, {
58 top: "72.5%",
59 bottom: "2.5%",
60 }],
61
62 // 多个x轴
63 xAxis: [{
64 type: "category",
65 gridIndex: 0,
66 }, {
67 type: "category",
68 gridIndex: 1,
69 }, {
70 type: "category",
71
72 gridIndex: 2,
73 }],
74
75 // 多个y轴
76 yAxis: [{
77 gridIndex: 0,
78 }, {
79 gridIndex: 1,
80 }, {
81 gridIndex: 2,
82 }],
83
84 // 在数据系列中设置数据
85 series: [
86
87 // datasetIndex为1
88 { type: "bar", datasetIndex: 1 }, // encode:{x:1 , y:"品类"}
89 { type: "bar", datasetIndex: 1 },
90 { type: "bar", datasetIndex: 1 },
91
92 // datasetIndex为2
93 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
94 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
95 { type: "bar", datasetIndex: 2, xAxisIndex: 1, yAxisIndex: 1 },
96
97 // datasetIndex为3
98 {
99 type: "bar",
100 datasetIndex: 3,
101 xAxisIndex: 2,
102 yAxisIndex: 2,
103 itemStyle: {
104 color: function(params) {
105 return {
106 shoe: '#5470c6',
107 shirt: '#91cc75',
108 pants: '#fac858'
109 } [params.data[2]];
110 }
111 },
112 },
113 {
114 type: "bar",
115 datasetIndex: 3,
116 xAxisIndex: 2,
117 yAxisIndex: 2,
118 itemStyle: {
119 color: function(params) {
120 return {
121 shoe: '#5470c6',
122 shirt: '#91cc75',
123 pants: '#fac858'
124 } [params.data[2]];
125 }
126 },
127 },
128 {
129 type: "bar",
130 datasetIndex: 3,
131 xAxisIndex: 2,
132 yAxisIndex: 2,
133 itemStyle: {
134 color: function(params) {
135 return {
136 shoe: '#5470c6',
137 shirt: '#91cc75',
138 pants: '#fac858'
139 } [params.data[2]];
140 }
141 },
142 },
143 ]
144 };
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
