初始学习 echarts 对数据到图表的映射关系，经常出现偏差。这里记录一些数据模板与对应的映射图表
基础配置
{
yAxis: {},
xAxis: {
type: 'category',
axisLabel: {
fontSize: 16,
color: '#fff'
}
},
}
后面的图表都继承该配置
图表独立配置
{
series: [
{
type: 'bar',
color: 'orange',
// 每条数据对应一种分类, 默认格式: [分类，数值]
data: [
['疾速扎古', 20 ],
['炮手扎古', 30 ],
['沙漠扎古', 40 ],
]
},
],
}
数据集
列表集合
dataset: {
source: [
// 数据分类, 多图表时，不同图表根据顺序取对应位置的数据
['name', 'value'], // 如果只存在单一列表时，该项可以不写
// 实际数据集合
['疾速扎古', 20],
['炮手扎古', 30],
['沙漠扎古', 40]
]
},
series: [
{
type: 'bar',
color: 'orange',
},
],
对象集合
dataset: {
source: [
// ['name', 'value'],
{ name: '疾速扎古', value: 20},
{ name: '炮手扎古', value: 30},
{ name: '沙漠扎古', value: 40}
]
},
series: [
{
type: 'bar',
color: 'orange',
},
],
维度定义
{
dataset: {
// 维度定义, 为数据指定别名
// 类似纯source集合的第一行
// 需要注意维度定义的顺序需要与具体数据排序一致
dimensions: [
'name',
'value',
// 多余的定义, 不影响之前图表的取值
'max',
'min'
],
source: [
['疾速扎古', 20], // 维度定义等价: {name: 'xx', value: 000 }
['炮手扎古', 30],
['沙漠扎古', 40]
]
},
series: [
{
type: 'bar',
color: 'orange',
},
],
}
维度定义与对象数据
dataset: {
dimensions: [
'name',
'value',
],
source: [
{ name: '疾速扎古', value: 20},
{ name: '炮手扎古', value: 30},
{ name: '沙漠扎古', value: 40}
]
},
series: [
{
type: 'bar',
color: 'orange',
},
],
// 修改维度定义顺序
{
dataset: {
dimensions: [
// 对调定义, 将改变值映射关系
'value',
'name',
],
source: [
{ name: '疾速扎古', value: 20},
{ name: '炮手扎古', value: 30},
{ name: '沙漠扎古', value: 40}
]
},
series: [
{
type: 'bar',
color: 'orange',
},
],
}
维度定义与encode
{
dataset: {
dimensions: [
'name',
'value',
'2120',
'2222'
],
source: [
['疾速扎古', 20, 0, 100],
['炮手扎古', 30, 10, 50],
['沙漠扎古', 40, 20, 80]
]
},
series: [
{
type: 'bar',
color: 'orange',
// encode 为图表指定具体的数据映射关系
encode: {
x: 'name', // 指定x轴对应的值
y: '2222' // 指定y轴对应的值
}
},
],
}
// 对象模式
const s7 = {
dataset: {
// 数据集合为对象时, 可省略维度定义, 直接使用数据属性字段
// dimensions: [
// 'name',
// 'value',
// '2120',
// '2222'
// ],
source: [
{ name: '疾速扎古', value: 20, ['2222']: 100},
{ name: '炮手扎古', value: 30, ['2222']: 50},
{ name: '沙漠扎古', value: 40, ['2222']: 80}
]
},
series: [
{
type: 'bar',
color: 'orange',
encode: {
x: 'name', // 指定x轴对应的值
y: '2222' // 指定y轴对应的值
}
},
],
}
source 对象模式
单一维度
{
dataset: {
source: {
// 数据分别聚集在对应的维度字段中
name: ['疾速扎古', '炮手扎古', '沙漠扎古'],
value: [20, 30, 40],
}
},
series: [
{
type: 'bar',
color: 'orange',
// 单一维度中, 取值根据默认顺序取值
},
],
}
多维度
存在多维度数据集合时， 需要明确维度顺序
// 定义维度顺序
{
dataset: {
dimensions: [
// 定义维度顺序
'name',
'value',
'2222',
],
source: {
name: ['疾速扎古', '炮手扎古', '沙漠扎古'],
value: [20, 30, 40],
['2222']: [80, 40, 50]
}
},
series: [
{
type: 'bar',
color: 'orange',
},
],
}
// 修改维度顺序
{
dataset: {
dimensions: [
'name',
'2222', // 对调值维度
'value',
],
source: {
name: ['疾速扎古', '炮手扎古', '沙漠扎古'],
value: [20, 30, 40],
['2222']: [80, 40, 50]
}
},
series: [
{
type: 'bar',
color: 'orange',
},
],
}
// encode 指定维度
{
dataset: {
source: {
name: ['疾速扎古', '炮手扎古', '沙漠扎古'],
value: [20, 30, 40],
['2222']: [80, 40, 50]
}
},
series: [
{
type: 'bar',
color: 'orange',
// 指定具体映射关系
encode: {
x: 'name',
y: 'value'
}
},
],
}
多维度、多图表
多维度，多图表的情况一般可以简单的认为是在同一容器内，根据不同维度的取值，渲染多张图表。 具体的配置与之前的单一维度类似， 需要注意的是不同图表与维度的对应关系。根据 seriesLayoutBy 关键字的设置分为：
- column 列表模式 (默认值)
- row 行模式
列模式
// 基础列表
{
dataset: {
// 将每一列看成一组数据
source: [
['疾速扎古', 20, 100],
['炮手扎古', 30, 80],
['沙漠扎古', 40, 10]
// 等价归类: 分类: ['疾速扎古' ...], 2020: [20, ....], 2021: [100, ....]
]
},
series: [
{
// 展示2020数据
name: '2020',
type: 'bar',
color: 'orange',
},
{
// 展示2021数据
name: '2021',
type: 'bar',
color: 'red',
},
],
/**
* ['疾速扎古', 20, 100],
* ['炮手扎古', 30, 80],
* ['沙漠扎古', 40, 10]
* ^ ^ ^
* 分类 2020 2021
*
* ^ ^
* [ 图表一取值 ]
*
* ^ ^
* [ 图表二取值 ]
*
*/
}
// 维度定义 + 指定维度
{
dataset: {
// 维度定义
dimensions: [
'name',
'2021',
'2020',
],
source: [
['疾速扎古', 20, 100],
['炮手扎古', 30, 80],
['沙漠扎古', 40, 10]
]
},
series: [
{
// 展示2020数据
type: 'bar',
color: 'orange',
// 指定维度映射
encode: {
x: 'name',
y: '2020'
}
},
{
// 展示2021数据
type: 'bar',
color: 'red',
encode: {
x: 'name',
y: '2021'
}
},
],
}
// 对象模式
dataset: {
source: [
{ name: '疾速扎古', ['2020']: 20, ['2021']: 100},
{ name: '炮手扎古', ['2020']: 30, ['2021']: 50},
{ name: '沙漠扎古', ['2020']: 40, ['2021']: 80}
]
},
series: [
{
// 展示2020数据
type: 'bar',
color: 'orange',
encode: {
x: 'name',
y: '2020'
}
},
{
// 展示2021数据
type: 'bar',
color: 'red',
encode: {
x: 'name',
y: '2021'
}
},
],
}
行模式
行模式下，将每一行作为一类数据集合。
{
dataset: {
// 将每一列看成一组数据
source: [
['疾速扎古', '炮手扎古', '沙漠扎古'],
[20, 200, 10],
[30, 10, 80],
]
},
series: [
{
// 展示2020数据
name: '2020',
type: 'bar',
color: 'orange',
seriesLayoutBy: 'row'
},
{
// 展示2021数据
name: '2021',
type: 'bar',
color: 'red',
seriesLayoutBy: 'row'
},
],
/**
* ['疾速扎古', '炮手扎古', '沙漠扎古'] > 分类
* ^ ^ ^
* [ 20, 200, 10 ] > 2020 > 图表一数据
* [ 30, 10, 80 ] > 2021 > 图表二数据
*/
}
多数据源
{
// 多图表分组
grid: [{ bottom: '55%' }, { top: '55%' }],
// 多组坐标系
xAxis: [
{ type: 'category', gridIndex: 0 },
{ type: 'category', gridIndex: 1 }
],
yAxis: [
{ type: 'value', gridIndex: 0 },
{ type: 'value', gridIndex: 1 }
],
// 多组数据源
dataset: [
{
source: [
{ name: '疾速扎古', ['2020']: 20, ['2021']: 100},
{ name: '炮手扎古', ['2020']: 30, ['2021']: 50},
{ name: '沙漠扎古', ['2020']: 40, ['2021']: 80}
],
},
{
source: [
{ name: '吉姆队长', ['2020']: 11, ['2021']: 40},
{ name: '狙击吉姆', ['2020']: 50, ['2021']: 10},
]
}
],
series: [
{
type: 'bar',
color: 'orange',
// 使用第一组数据源
dataSetIndex: 0,
// 展示在第一组坐标系
xAxisIndex: 0,
yAxisIndex: 0,
encode: {
x: 'name',
y: '2020'
}
},
{
type: 'bar',
color: 'red',
// 使用第二组数据源
dataSetIndex: 1,
// 展示在第二组坐标系
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'name',
y: '2021'
}
},
],
}
总结
一般的数据映射关系, 需要关注的点：
- 原始数据结构, [对象， 列表, 值分布]
- 多表或单表
根据关注点配合修改： source dimensions encode seriesLayoutBy 达到数据正确映射的目的
tips
一般列表数据表示的映射关系比较模糊, 可以通过转对象或使用 dimensions + encode 明确各图表的映射关系
