简介:
数据集(dataset)是专门用来管理数据的组件。简化在每一个系列中设置数据,这一个配置是在Echarts4 中开始支持。
通过数据集配置,避免为每一个系列创建一个数据,避免格式转化的痛苦。
简单举例:
在 series 中配置数据:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80],
type: 'bar'
},
{
data: [120, 200, 150, 80],
type: 'bar'
},
]
};
通过数据集来配置:
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
dataset:[
{
source:[
['Mon',120,120],
['Tue',200,200],
['Wed',150,150],
['Thu',80,80],
]
}
],
series: [
{
type: 'bar'
},
{
type: 'bar'
},
]
};
一、 dataset 配置代码:
//维度就是列或者行 这里简单用二维数组来配置
option={
dataset:[
//第一种写法 配置数据
{
id:'name', // 该系列的id
source:[
// 第一行可以为维度名称,但也可以不写,不写则默认获取每一行第一列为维度名称,如何你需要做数据转化,则必写
['Product','value1','value2']
['Mon',120,110], // Mon 数据组
['Tue',120,110], // Tue 数据组
],
// 简单写法配置维度
dimensions: ['value1','value2'], // 定义维度的信息,这个也可以配置在series中。
// 详细写法配置维度
dimensions:[
{:
name:'value1', // 维度名称
type:'string', // 维度类型 包含 string、number、ordinal、float、int、time等类型
},
{
name:'value2',
type:'string',
}
],
sourceHeader:0 //指定上面的 source 配置中从哪一行/列为维度信息,而后才为数据, 这里取行或者列需要在 series.seriesLayoutBy 中配置
},
//第二种写法 配置数据 key-value 形式
{
source:[
{product: 'Mon', value1: 120, value2: 110},
{product: 'Tue', value1: 120, value2: 110}
]
},
//第三种写法 配置数据 key-value 形式
{
source:{
'product': ['Mon', 'Tue'],
'value1': [120, 120],
'value2': [110, 110]
}
},
// 通过transform 处理的数据配置
{
transform:[
{
type:'filter', // Echarts提供的默认转化类型 filter:筛选,
fromDatasetIndex: 0, // 引用 index 为 `0` 的 dataset 数据
config:{dimension: 'value2', value: 110}, // 筛选 value2 列 条件为 110
},
]
},
{
transform:[
{
type:'filter', // Echarts提供的默认转化类型 filter:筛选,sort 排序
fromDatasetIndex: 0, // 引用 index 为 `0` 的 dataset 数据
fromDatasetId:'name', // 引用 ID 为 'name' 的 dataset 数据
fromTransformResult: 1 // // 获取 transform result[1] 。
// 排序的条件可以用 >,<,=,!=,并且包含逻辑的比较 与 或 非( and | or | not )
// config:{dimension: 'value2', value: 110}, // 筛选 value2 列 条件为 110
config:{
and:[
{dimension: 'value2','>':50}, // value2 列 值大于50的
{dimension: 'value1','<':200}, // value1 列 值小于200的
]
},
parser:'time', // 解析器,将值转化为对应的格式,然后比较,常用于时间格式
print:true, // 在发生错误时报错,配置项只在开发环境中生效
}
]
},
{
transform:[
{
type:'sort', // 排序
fromDatasetIndex: 0,
config:{dimension: 'value2', order: 'desc'},// order为 asc 或者 desc
}
]
},
// 引入外部的数据转化器 使用第三方库 ecStat 提供的数据转换器。
{
// 请直接参考文档 : https://echarts.apache.org/handbook/zh/concepts/data-transform/
}
],
// 在series 中定义如何获取 datase 的数据操作
series:[
{
type:'bar',
datasetIndex: 0, // //引用 index 为 `0` 的 dataset 数据 ,
datasetId: 'name', // 通过 dataset 中的 ID 引入 数据
encode:{
// 将 "product" 列或者行 映射到 X 轴。
x: 'product',
// 将 "value1" 列或者行 映射到 Y 轴。
y: 'value1'
},
seriesLayoutBy:'column', // 指定dataset 中用行还是列,来取值展示, column 默认列,row 行
}
]
}
配置使用简单总结:
1.先定义 dataset 数据
2.在 series 中获取对应的 dataset 数据 ,通过 datasetIndex 引入 dataset 的数据, seriesLayoutBy 定义从行还是列来获取数据, encode 获取对应的列或者行
二、配置实例代码
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
dataset:[
// 第一组数据 index 为 0
{
source:[
['product','value1','value2','value3'],
['Mon',120,110],
['Tue',200,150],
['Wed',150,85],
['Thu',80,80],
],
},
// 第二组数据 index 为 1
{
source:[
['Fri',89,95],
['Sat',140,145],
['Sun',135,140],
],
dimensions:['product','value1','value2']
},
// 第三组,通过 数据转化的数据 index 为 2
{
transform:[
{
fromDatasetIndex: 0,
type:'filter',
config:{dimension:'value2','>':80}
}
]
}],
series: [
//引用 index 为 `0` 的 dataset 数据
{
type: 'bar',
datasetIndex: 0,
// 默认获取值为第一列
encode:{
// 将 "value1" 列映射到 Y 轴。
y: 'value1',
}
},
//引用 index 为 `0` 的 dataset 数据
{
type: 'bar',
datasetIndex: 0,
encode:{
// 将 "value2" 列映射到 Y 轴。
y: 'value2',
}
},
//引用 index 为 `1` 的 dataset 数据
{
type: 'bar',
datasetIndex: 1,
encode:{
// 将 "value2" 列映射到 Y 轴。
y: 'value2',
}
},
//引用 index 为 `2` dataset 的 transform 数据
{
type: 'bar',
datasetIndex: 2
},
]
};
直接在 Echarts 中的 示例中使用