ECharts bar chart backed by dataset; tooltip with several values - echarts

Question

I'd like to show bar chart with categories on x-axis (say months), multiple series and each bar element containing multiple data points (value shown on y-axis, the rest in tooltip).
It's relatively easy to do it using series.data:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 320, 2],
['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 420, 3],
['June', 123, 5]],
encode: {
tooltip: [0,1,2]
}
}
]
};
I'm wondering how it can be refactored best to use dataset? I have two ideas, I wonder what are pros & cons.. Maybe there is other, cleaner way to express it.
Ideally instead of one big array I'd prefer to have array of objects so dimensions are named.
Solution: One dataset, shifting indices
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category'
//, data: ['Jul', 'June']
},
yAxis: {
type: 'value'
},
dataset: {
source: [
['Jul', 320, 2, 420, 3],
['June', 119, 4, 123, 5]]
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
encode: {
y: 1,
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
encode: {
y: 3,
tooltip: [0,3,4]
}
}
]
};
With named dimensions it would look like:
dataset: {
source: [
[month:'Jul', SeriesA_dim1: 320, SeriesA_dim2: 2, SeriesB_dim1: 420, SeriesB_dim2: 3],
[month:'Jun', SeriesA_dim1: 119, SeriesA_dim2: 4, SeriesB_dim1: 123 SeriesB_dim2: 5],
},
....
encode: {
y: 'SeriesB_dim1',
tooltip: ['month','SeriesB_dim1','SeriesB_dim2']
}
Solution 2: Multiple datasets
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
dataset: [{
source: [
['Jul', 320, 2],
['June', 119, 4]]
},
{
source: [
['Jul', 420, 3],
['June', 123, 5]]
}],
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 320, 2],
// ['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 420, 3],
// ['June', 123, 5]],
datasetIndex: 1,
encode: {
tooltip: [0,1,2]
}
}
]
};
With named dimensions it would look like:
dataset: [{
source: [
[month:'Jul', dim1: 320, dim2: 2],
[month:'June', dim1: 119, dim2: 4]]
},
{
source: [
[month:'Jul', dim1: 420, dim2: 3],
[month:'June', dim1: 123, dim2: 5]]
}],
....
encode: {
y: 'dim1', // the default would be likely working as well
tooltip: ['month','dim1','dim2']
}