数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在series.data中设置数据,但是从ECharts4支持数据集开始,更推荐使用数据集来管理数据。因为这样,数据可以被多个组件复用,也方便进行“数据和其他配置”分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。
重要提示:以下内容的阅读需要绘制基础图表的知识。没有的同学请移步ECharts中常见的基本概念。
目录
引言
根据前面的知识同学们已经掌握了基础的绘制图表的方法,同时也掌握了再系列中设置数据的方法,为了方便大家回忆以及对比,如图3.1所示,展示了基础的系列数据设置方法。图中在series中的data属性中设置了对应的数据。
图3.1系列内设置数据
这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。
3.1数据集(dataset)基础
可视化中存在一个规律,数据常变,其他配置常不变,因此将数据与其他配置项分开设置,更加易于管理。同时数据的组织形式存在一维数组、对象数组等多种形式,将数据设置在数据集(dataset)中,有助于方便快捷的使多组图标共享一组数据,同时在不调整数据的原始格式的情况下,方面数据展示。具体优势如下:
- 提供数据;
- 指定数据到视觉的映射,从而形成图表。
数据集(dataset)的位置一般为“option.dataset”,可以把它理解为一个对象,其中包括两个常用的属性分别为“source”与“dimensions”,“source”用于指定数据,可以是二维数组,也可以是对象数组;“dimensions”用于指定维度与数据项,当指定列为维度的时候,那么每行就是一个数据项。
“dataset”配置项遵循先类目,后数据的规律,即默认情况下,先选择类目轴的内容,接下来内容则为绘制图形中对应的数据值。
3.2数据集(dataset)中设置数据
数据集(dataset)中数据常见的格式为为二维数组和对象数组的形式,本部分的内容主要是针对这两种格式的数据进行解读。
3.2.1二维数组数据(默认效果)
在使用数据集之前先来了解一下数据格式,如图3.2为接下来案例需要用的数据格式——二维数组格式。
图3.2数据格式
由图3.2可以看出,在第1行为年份的标注,第一列为产品名称的标注,在绘制图表时,第1行和第1列均可以考虑作为类目轴的数据放置的坐标轴上,“数据”部分的内容为真实要在图表中绘制区域中展示的内容。
注意:第1行第1列的内容“product”一般不与数据相对应,可以考虑用来进行相应的内容提示,“product”所在的位置内容在默认情况下是被忽略的,因此如果没有内容,需要使用空字符串占位。
在使用“dataset”时,ECharts会自动搜索“source”中的数据,在未指定的情况下默认第1列从第2行开始为类目轴中的显示内容(产品名称),第2列开始每1列为一组数据,即从左向右看为先类目,后数据。效果如图3.3所示,标号为2的柱形图对应的是第2列数据(2015年数据)中的每一个具体值,3号与4号柱形内容以此类推。具体的实例代码请参照“3-dataset-source-二位数组-默认.html”,在使用dataset之后,除非需要维度绑定或者特殊提示之外,系列(series)中便不在需要data属性进行数据设置。
图3.3默认柱形图效果
3-dataset-source-二位数组-默认.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化图表实例
var chart = echarts.init(document.getElementById('chart'),null,{width:'1500px',height:'500px'});
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['','2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
],
},
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis:{ type: 'category' },
// 声明一个 Y 轴,数值轴。
yAxis: {},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar'},
{ type: 'bar'},
{ type: 'bar'},
]
};
chart.setOption(option);
</script>
</body>
</html>
3.2.2对象数组数据
如图3.4为对象数组的数据格式展示。
3.4对象数组格式的数据
对象数组格式的数据相对于二维数组比较直观,它明确的指出了产品名称、每一年的数值等内容,使用对象数组的数据时,有两种图表展示形式。
①配合“dataset”的另一个常见属性“dimensions”使用,如图3.5为对象数组数据对应的完整“dataset”设置。
②配合“series”中的“encode”属性显示。(本小节不阐述)
本小节仅为大家阐述①方式,②方式会在本章的后面部分阐述。
图3.5“dimensions”属性配合对象数组数据
“dimensions”属性用于指明数据维度,它大致可以分为两部分,第一部分指明类目轴的类目,第二部分指明不同组的数据。
由图3.5可以看出,属性“dimensions”中第1项指明了类目轴,后面几项指明了要展示的数据(从第2项元素开始每个元素代表一组数据),相当于说明了需要在图表中展示的维度。
例如,将“dimensions”值修改为:“['product','2016','2017']”,则表明类目轴内容为每个对象中的'product'值,要展示的数据为“2016”“2017”两个成员对应的值,即先类目,后数据。
本部分程序效果与图3.3一致,标号为2的柱形图对应的是“dimensions”中第2项对应到每个数据对象中的具体值,3号与4号柱形内容以此类推。具体的实例代码请参照“3-dataset-source-对象数组-默认.html”,同样,在使用dataset之后,系列中有依然不需要设置数据值。
3-dataset-source-对象数组-默认.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化图表实例
var chart = echarts.init(document.getElementById('chart'),null,{width:'1000px',height:'500px'});
option = {
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
// 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
chart.setOption(option);
</script>
</body>
</html>
3.2.3指定数据内容映射
刚才介绍了两种数据格式的默认情况,那么对于高维数据,在不调整数据格式的情况下,想要任意指定维度去展示应当如何操作呢?下面向大家介绍指定数据内容映射的方法。
在ECharts中可以使用series.seriesLayoutBy属性来配置指定数据集的列(column)还是行(row)映射为系列(series),默认情况下是按照列(column)来映射。
也可以使用series.encode属性指定维度映射的规则:如何从dataset的维度(一个“维度”的意思是一行/列)映射到坐标轴(如X、Y轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。
1.seriesLayoutBy配置项
seriesLayoutBy配置项,可以改变图表对于行列的理解。
seriesLayoutBy可取值如下:
①'column':默认值。将dataset中的第1列分配给类目轴,后面列给series中的data。
②'row':将dataset中的行分配给series中的data。
为了便于理解请看如图3.6所示的代码,图3.6的系列中绘制了7个柱形图,代码中包含了两组坐标轴(两个X轴和两个Y轴),图3.6中的系列中前3个柱形图对应的是第一组直角坐标轴,其中将seriesLayoutBy配置项设置为“row”,含义为以行为标准绘制图表,也就是说图3.6中强制设置了前三个柱形图对应的类别(X轴)为第1行的2~5列,绘制图形的数据对应的是第2行至第4行的2~5列。
图3.6中后4个柱形图通过xAxisIndex、yAxisIndex对应到了第二组坐标轴中,本部分的系列中没有使用seriesLayoutBy设置映射,因此采用了默认的图表绘制方法,图3.6对应的最终结果为图3.7所示,同学们可以自行在“3-dataset-source-二位数组-默认.html”中的系列中添加seriesLayoutBy属性,尝试变换类目轴内容。
图3.6seriesLayoutBy使用演示图
图3.7seriesLayoutBy配置项结果示意图
3.2.4数据到图形的映射(series.encode)
1.基本内容
encode属性主要完成dataset中数据到图形的映射,它的书写位置在系列中。如图3.8所示,series.encode为一个对象,对象成员包括坐标系、标签等,如'x','y','tooltip'等,其中'x','y'的取值应是数据中的维度名(string格式)或者维度的序号(number格式,从0开始计数),可以指定一个或多个维度(使用数组)。通常情况下,encode对象内的成员不需要所有的都写,按需写即可,在“3-数据集合-encode举例.html”程序中已经展示了encode的基本用法。
图3.8encode展示图
3-数据集合-encode举例.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const chartDom = document.getElementById('chart');
// const chart = echarts.init(chartDom,'westeros',{renderer:'svg'});
const chart = echarts.init(chartDom);
chart.setOption({
dataset:{
source:[
['一季度',100,80,'分类1',50],
['二季度',120,100,'分类2',150],
['三季度',150,120,'分类3',200],
['四季度',200,150,'分类4',250]
]
},
title:{
text:"Echars 多系列案例"
},
xAxis:{
data:['一季度','二季度','三季度','四季度']
},
yAxis:{
},
series:[{
type:'pie', // 饼图
center:['67%',60],
radius: 35,
encode:{
itemName:0,value:4
}
}, {
type:"line", // 折线图
encode:{
x:0,y:2
}
},{
type:'bar', // 柱状图
encode:{
x:0,y:2
}
}]
})
</script>
</body>
</html>
当encode不明确指出的时候ECharts会采用默认的形式进行映射,映射规则为如下:
· 在坐标系中(如直角坐标系、极坐标系等)
如果有类目轴(axis.type为'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列,如案例“3-dataset-source-二位数组-默认.html”所示。
如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的XY轴),则每两列对应一个系列,这两列分别映射到这两个轴上,如案例“3-encode散点图案例.html”所示。
· 如果没有坐标系(如饼图)
取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值),如案例“3-encode饼图设置案例.html”所示。
3-encode饼图设置案例.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts-5.3.3.min.js"></script>
<style>
#chart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化图表实例
var chart = echarts.init(document.getElementById('chart'),null,{width:'500px',height:'1000px'});
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
series: [
{
type: 'pie',
radius: '20%',
center: ['25%', '30%']
// No encode specified, by default, it is '2012'.
},
{
type: 'pie',
radius: '20%',
center: ['75%', '30%'],
encode: {
itemName: 'product',
value: '2013'
}
},
{
type: 'pie',
radius: '20%',
center: ['25%', '75%'],
encode: {
itemName: 'product',
value: '2014'
}
},
{
type: 'pie',
radius: '20%',
center: ['75%', '75%'],
encode: {
itemName: 'product',
value: '2015'
}
}
]
};
chart.setOption(option);
</script>
</body>
</html>
2.通用设置
针对不同的坐标系encode有不同的映射方式,所有坐标系都通用的encode使用方式如下。代码3-1中,“tooltip”使用数组形式,效果为提示框中显示'product'与'score'对应的内容;“seriesName”使用数组形式,效果为将对应维度中的名称连接起来作为系列名;“itemId”的取值表示使用“维度2”中的值作为id。这在使用setOption动态更新数据时有用处,可以使新老数据用id对应起来,从而能够产生合适的数据更新动画;“itemName”的取值表示指定数据项的名称使用“维度3”在饼图等图表中有用,可以使这个名字显示在图例(legend)中。
代码3-1:
encode:{
tooltip:['product','score']
seriesName:[1,3],
itemId:2,
itemName:3
}
3.直角坐标轴特有设置
在直角坐标轴中例如grid/cartesian中,encode有其特有的使用方式,可以将多个维度映射到X轴,使用数组的形式赋值即可,如代码3-2所示。代码3-2中,将一个数组赋值给了“x”,代表把“维度1”、“维度5”、“名为score的维度”映射到X轴;把0赋值给“y”,表示把0号维度映射到y轴。
代码3-2:
encode:{
x:[1,5,'score'],
y:0
}
4.无坐标轴图表设置
对于一些没有坐标系的图表,例如饼图、漏斗图等,encode的使用方法如代码3-3所示,代码中“value”取值的含义为,取维度为3的数据作为饼图的数据值。
代码3-3:
type:’pie’,
encode:{
value:3
}
5.其他坐标轴图表设置
在其他坐标轴类型中使用encode方法如图3.9所示,每种轴都有特殊的属性可以设置,但无论什么属性,属性值对应的均是数据中的维度数值。
图3.9其他轴类型encode设置
标签:映射,dataset,维度,举例,数组,encode,数据,ECharts From: https://blog.csdn.net/yiqinkongjian/article/details/139423940