ECharts Dataset
ECharts uses the dataset to manage data.
The dataset component is used for separate dataset declarations, allowing data to be managed independently, reused by multiple components, and enabling the mapping of data to visuals based on the data.
Below is a simple example of a dataset:
Example
option = {
legend: {},
tooltip: {},
dataset: {
// Provide a set of data.
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]
]
},
// Declare an X-axis, category axis. By default, the category axis corresponds to the first column of the dataset.
xAxis: {type: 'category'},
// Declare a Y-axis, value axis.
yAxis: {},
// Declare multiple bar series, by default, each series will automatically correspond to each column of the dataset.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
Alternatively, you can also use the common format of an array of objects:
Example
option = {
legend: {},
tooltip: {},
dataset: {
// Here, the order of dimension names is specified, allowing the use of default dimension to axis mapping.
// If dimensions are not specified, you can also complete the mapping by specifying series.encode, as described later.
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'}
]
};
Mapping Data to Graphics
We can map data to graphics in the configuration options.
We can use the series.seriesLayoutBy property to configure whether the dataset maps columns or rows to series, with the default being column mapping.
The following example configures whether data is displayed by columns or rows using the seriesLayoutBy property.
Example
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
xAxis: [
{type: 'category', gridIndex: 0},
{
xAxis: [
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// These series will be in the first Cartesian coordinate system, each series corresponding to each row in the dataset.
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// These series will be in the second Cartesian coordinate system, each series corresponding to each column in the dataset.
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
Most charts describe data in a "two-dimensional table" structure. We can use the series.encode property to map the corresponding data to axes (such as X and Y axes):
Example
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
grid: {containLabel: true},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to the X axis.
x: 'amount',
// Map the "product" column to the Y axis.
y: 'product'
}
}
]
};
The basic structure of encode declaration is as follows, where the left side of the colon is the specific name of the coordinate system, labels, etc., such as 'x', 'y', 'tooltip', etc., and the right side is the dimension name (string format) or the dimension number (number format, starting from 0). You can specify one or multiple dimensions (using an array). Usually, not all of the following information is necessary; write only what is needed.
The following are the supported attributes of encode:
// Supported in any coordinate system and series:
encode: {
// Display values from the "product" dimension and "score" dimension in the tooltip
tooltip: ['product', 'score'],
// Concatenate dimension names from "dimension 1" and "dimension 3" as the series name. (This avoids repeating long names in series.name)
seriesName: [1, 3],
// Use the value from "dimension 2" as the id. This is useful when updating data dynamically with setOption, as it allows new and old data to be matched by id, producing appropriate data update animations.
itemId: 2,
// Specify the name of the data item as "Dimension 3" which is useful in pie charts and other charts to display this name in the legend.
itemName: 3
}
// Properties specific to the rectangular coordinate system (grid/cartesian):
encode: {
// Map "Dimension 1", "Dimension 5", and "Dimension named score" to the X-axis:
x: [1, 5, 'score'],
// Map "Dimension 0" to the Y-axis.
y: 0
}
// Properties specific to the single axis:
encode: {
single: 3
}
// Properties specific to the polar coordinate system:
encode: {
radius: 3,
angle: 2
}
// Properties specific to the geographic coordinate system:
encode: {
lng: 3,
lat: 2
}
// For charts without a coordinate system, such as pie charts and funnel charts, it can be:
encode: {
value: 3
}
More encode examples:
Example
$.get('https://www.tutorialpro.org/static/js/life-expectancy-table.json', function (data) {
var sizeValue = '57%';
var symbolSize = 2.5;
option = {
legend: {},
tooltip: {},
toolbox: {
left: 'center',
feature: {
dataZoom: {}
}
},
grid: [
{right: sizeValue, bottom: sizeValue},
{left: sizeValue, bottom: sizeValue},
{right: sizeValue, top: sizeValue},
{left: sizeValue, top: sizeValue}
],
xAxis: [
{type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
{type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
{type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
{type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
],
yAxis: [
{type: 'value', gridIndex: 0, name: 'Life Expectancy'},
{type: 'value', gridIndex: 1, name: 'Income'},
{type: 'value', gridIndex: 2, name: 'Population'},
{type: 'value', gridIndex: 3, name: 'Population'}
],
dataset: {
dimensions: [
'Income',
'Life Expectancy',
'Population',
'Country',
{name: 'Year', type: 'ordinal'}
],
source: data
},
series: [
{
type: 'scatter',
{
symbolSize: symbolSize,
xAxisIndex: 0,
yAxisIndex: 0,
encode: {
x: 'Income',
y: 'Life Expectancy',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'Country',
y: 'Income',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 2,
yAxisIndex: 2,
encode: {
x: 'Income',
y: 'Population',
tooltip: [0, 1, 2, 3, 4]
}
},
{
type: 'scatter',
symbolSize: symbolSize,
xAxisIndex: 3,
yAxisIndex: 3,
encode: {
x: 'Life Expectancy',
y: 'Population',
tooltip: [0, 1, 2, 3, 4]
}
}
]
};
myChart.setOption(option);
});
Visual Channel Mapping (Color, Size, etc.)
We can use the visualMap component for visual channel mapping.
Visual elements can be:
- symbol: The type of graphic for the glyph.
- symbolSize: The size of the glyph.
- color: The color of the glyph.
- colorAlpha: The transparency of the glyph's color.
- opacity: The transparency of the glyph and its附属物 (such as text labels).
- colorLightness: The lightness of the color.
- colorSaturation: The saturation of the color.
- colorHue: The hue of the color.
Multiple visualMap components can be defined, allowing simultaneous visual mapping of multiple dimensions in the data.
Example
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
{
dataset: {
source: [
[32.7, 20112, 'Walnut Brownie']
]
},
grid: {containLabel: true},
xAxis: {name: 'amount'},
yAxis: {type: 'category'},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#D7DA8B', '#E15457']
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
Interactive Linkage
The following example demonstrates multiple charts sharing one dataset with interactive linkage:
Example
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['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]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});