前端框架ECharts dataset对数据可视化的高级管理
黎燃 人气:0dataset 管理数据
提供一份数据。 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
option = {
legend: {},
tooltip: {},
dataset: {
//
source: [
['product', '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]
]
},
//dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
//
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
Apache EChartsTM 4
Apache EChartsTM 4开始支持数据集组件进行单独的数据集声明，以便数据可以单独管理，由多个组件重用，并且可以基于数据指定数据到可视化的映射。这可以在许多场景中带来方便。 在ECharts 4之前，数据只能以“series”形式声明，
option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}
该方法的优点是直观、易于理解，适用于某些特殊图表类型的特定数据类型定制。然而，缺点是为了匹配这种数据输入形式，通常需要有一个数据处理过程，并将数据分割设置为每个系列（和类别轴）。此外，这不利于多个系列共享一个数据，也不利于基于原始数据的图表类型和系列的映射排列。 因此，ECharts 4提供了一个单独声明数据的数据集组件，这带来了以下效果： 它可以接近数据可视化的常见思维模式：
（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。 数据和其他配置可以分开。数据始终在变化，其他配置始终不变。分离易于单独管理。 数据可以被多个系列或组件重用。对于具有大量数据的场景，不必为每个系列创建一个数据。 支持更常见的数据格式，如二维数组、对象数组等，在一定程度上避免用户转换为数据格式。
dimensions 指定了维度的顺序
用 dimensions 指定了维度的顺序。直角坐标系中， 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。如果不指定 dimensions，也可以通过指定 series.encode，完成映射。
option = {
legend: {},
tooltip: {},
dataset: {
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'}
]
};
一目了然，可以进行以下映射： 指定数据集的列或行是否映射到一系列图形。您可以使用SeriesLayoutBy属性。默认值是按列映射。
series: {
// 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。
encode: {x: 2, y: 4},
...
}
指定维度映射规则：如何将数据集维度（“维度”表示行/列）映射到坐标轴（如X和Y轴）、工具提示、标签、图形元素大小和颜色（visualMap）。您可以使用series配置encode属性和visualMap组件（如果需要映射的颜色大小等视觉维度）。在上面的示例中，ECharts没有提供这种映射配置，因此ECharts将根据最常见的理解执行默认映射：X坐标轴声明为类别轴，默认情况下将自动对应于数据集源中的第一列；三列图表系列，逐一对应数据集源中的每个后续列。
series: {
encode: {x: 2, y: 4},
seriesLayoutBy: 'row',
...
}
在系列中设置的 dimensions 会更优先采纳。可以在 type 中指定维度类型。可以简写为 string，表示维度名。
var option1 = {
dataset: {
dimensions: [
{name: 'score'},
//
'amount',
//
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
};
var option2 = {
dataset: {
source: [...]
},
series: {
type: 'line',
//
dimensions: [
null, // 可以设置为 null 表示不想设置维度名
'amount',
{name: 'product', type: 'ordinal'}
]
},
...
};
数据表软件
在大多数常见的图表中，数据可以以二维表格的形式描述。广泛使用的数据表软件（如MS Excel、Numbers）或关系数据数据库是二维表。它们的数据可以导出为JSON格式并输入到数据集。在源代码中，在许多情况下可以省略一些数据处理步骤。 如果数据导出到csv文件，则可以使用一些csv工具（如dsv或PapaParse）将csv转换为JSON。 在JavaScript的常见数据传输格式中，二维数组可以直观地存储二维表。前面的示例都由二维数组表示。 除了二维数组，数据集还支持以下键值数据格式，这些格式也非常常见。但是，seriesLayoutBy参数在此类格式中不受支持。 按行的 key-value 形式（对象数组），这是个比较常见的格式。 按列的 key-value 形式。
dataset: [{
//
source: [
{product: 'Matcha Latte', count: 823, score: 95.8},
{product: 'Milk Tea', count: 235, score: 81.4},
{product: 'Cheese Cocoa', count: 1042, score: 91.2},
{product: 'Walnut Brownie', count: 988, score: 76.9}
]
}, {
//
source: {
'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
'count': [823, 235, 1042, 988],
'score': [95.8, 81.4, 91.2, 76.9]
}
}]
目前，并非所有图表都支持数据集。支持数据集的图表包括直线、条形图、饼图、扫描仪、效应扫描仪、平行线、烛台、地图、基金和自定义。未来将有更多图表可供支持。 最后，给出一个例子。多个图表共享具有链接交互的数据集。
加载全部内容