ECharts dataset
ECharts usage dataset manage data.
dataset components are used for separate dataset declarations so that data can be managed separately, reused by multiple components, and data-to-visual mapping can be specified based on the data.
Here is one of the simplest dataset examples:
Example
option = {
legend: {},
tooltip: {},
dataset: {
// Provide a copy of the 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, numerical axis.
yAxis: {},
// Declare multiple bar series, and by default, each series will automatically correspond to each column of the dataset.
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
Or you can use the common format of an array of objects:
Example
option = {
legend: {},
tooltip: {},
dataset: {
//
The order of dimension names is specified here, so that the default mapping from dimension to coordinate axis can be utilized.
// If dimensions are not specified, the mapping can also be completed by specifying series. encode, as shown in the following text.
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'}
]
};
Data-to-drawing mapping
We can map the data to the drawing in the configuration item.
We can use it. series.seriesLayoutBy property to configure the dataset whether a column (column) or a row (row) is mapped to a graphical series (series), and the default is to map by column (column).
For the following example, we will pass the seriesLayoutBy property to configure whether the data is displayed using columns or rows.
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},
{type: 'category', gridIndex: 1}
],
yAxis: [
{gridIndex: 0},
{gridIndex: 1}
],
grid: [
{bottom: '55%'},
{top: '55%'}
],
series: [
// These series will correspond to each row of the dataset in the first Cartesian coordinate system.
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// These series will correspond to each column of the dataset in the second Cartesian coordinate system.
{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 of the data described in common charts is a “two-dimensional table” structure, which we can use series.encode property maps the corresponding data to axes (such as X, 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 encode basic structure of the declaration is as follows, where to the left of the colon are specific names such as coordinate system, label, etc., such as’x’,’y’, ‘tooltip’, etc., and to the right of the colon is the dimension name in the data (in string format) or the dimension number (number format, counted from 0). You can specify one or more dimensions (using arrays). In general, the following information does not need to be written, but can be written on demand.
The following is encode supported attributes:
// In any coordinate system and series, it supports:
encode: {
// Display the values of "dimension named product" and "dimension named score" in tooltip
tooltip: ['product', 'score']
// Use the dimension names of "Dimension 1" and "Dimension 3" together as the series name. (Sometimes the name is longer, which can avoid typing these names repeatedly in series. name)
seriesName: [1, 3],
// Indicates using the value from dimension 2 as the ID. This is useful when using setOption to dynamically update data, as it allows new and old data to be matched with IDs, thereby generating appropriate data update animations.
itemId: 2,
// The use of dimension 3 to specify the name of a data item is useful in charts such as pie charts, as it can be displayed in the legend.
itemName: 3
}
// The unique properties of a grid/Cartesian coordinate system:
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
}
// Single Axis specific attributes:
encode: {
single: 3
}
// Polar coordinate system specific properties:
encode: {
radius: 3,
angle: 2
}
// Unique attributes of geographic coordinate systems (geo):
encode: {
lng: 3,
lat: 2
}
// For some charts without coordinate systems, such as pie charts, funnel charts, etc., they can be:
encode: {
value: 3
}
More encode example:
Example
$.get('https://www.runoob.com/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);
});
Mapping of visual channels (colors, dimensions, etc.)
We can use it. visualMap component to map visual channels.
Visual elements can be:
symbol: The drawing category of the element.symbolSize: The size of the element.color: The color of the element.colorAlpha: Transparency of the color of the elementopacity: Transparency of elements and their appendages, such as text labels.colorLightness: The brightness and shade of the color.colorSaturation: The saturation of the colorcolorHue: The hue of the color.
visualMap : Components can be defined so that multiple dimensions in the data can be visually mapped at the same time.
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: {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
For the following example, multiple charts share a dataset with linkage interaction:
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);
});