ECharts response type
The ECharts chart is displayed in the DOM node (container) of the height and width specified by the user.
Sometimes we want to show the contents of the chart well on PC and mobile devices, and achieve responsive design. In order to solve this problem, ECharts has improved the positioning settings of components, and achieved self-adaptation similar to CSS Media Query.
Positioning and layout of ECharts components
Most “components” and “series” follow two positioning methods.
Left/right/top/bottom/width/height positioning mode
Each of these six quantities can be an “absolute value” or a “percentage” or a “location description”.
absolute value
The unit is browser pixels (px), using the
numberwritten in form (not in units). For example{left: 23, height: 400}.Percentage
Indicates how many percent of the height and width of the DOM container, using the
stringformal writing. For example{right: '30%', bottom: '40%'}.Location description
Can be set
left: 'center', which indicates that the level is in the middleCan be set
top: 'middle', that indicates vertical centering
The concepts of these six quantities are similar to those of the six quantities in CSS:
left: The distance from the left boundary of the DOM containerright: The distance from the right boundary of the DOM containertop: The distance from the upper boundary of the DOM containerbottom: The distance from the lower boundary of the DOM containerwidth: Width.height: Height.
Horizontally, of the three quantities left, right, and width, only two quantities need to have a value, because any two quantities can determine the location and size of the component, such as left and right or right and width can determine the location and size of the component. Vertical, top, bottom, height three quantities, and horizontal category do not repeat.
Center / radius positioning mode
centerIs an array that represents
[x, y], of whichx、ycan be”absolute value” or “percentage” with the same meaning as above.radiusIs an array that represents
[内Radius], where the inner and outer radius can be “absolute” or “percentage”, with the same meaning as above.The percentage setting is useful when adapting container size.
Horizontal and vertical
Most of the “long and narrow” components of ECharts (such as legend, visualMap, dataZoom, timeline, etc.) provide the choice of “horizontal layout” and “vertical layout”. For example, on a slender mobile screen, it may be appropriate to use “portrait layout”; on PC widescreen, it may be appropriate to use “horizontal layout”.
The horizontal and vertical layout is generally set in the “component” or “series” orient or layout on the configuration item, set it to ‘horizontal’ or’ vertical’.
Example
In the following example, we can try to drag the dot in the lower right corner, and the chart changes with the size of the screen. legend and series will automatically change the location and mode of layout.
In the example, we used jQuery to load external data, we need to introduce jQuery library.
Example
$.when(
$.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
$.getScript('https://www.runoob.com/static/js/draggable.js')
).done(function () {
draggable.init(
$('div[_echarts_instance_]')[0],
myChart,
{
width: 700,
height: 400,
throttle: 70
}
);
myChart.hideLoading();
option = {
baseOption: {
title : {
text: 'Nightingale Rose',
subtext: 'Pure fiction',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Radius Mode',
type:'pie',
roseType : 'radius',
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
},
{
name:'Area Mode',
type:'pie',
roseType : 'area',
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
},
media: [
{
option: {
legend: {
right: 'center',
bottom: 0,
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['25%', '50%']
},
{
radius: [30, '50%'],
center: ['75%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
legend: {
right: 'center',
bottom: 0,
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['25%', '50%']
},
{
radius: [30, '50%'],
center: ['75%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
legend: {
right: 'center',
bottom: 0,
orient: 'horizontal'
},
series: [
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
legend: {
right: 10,
top: '15%',
orient: 'vertical'
},
series: [
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
}
]
};
myChart.setOption(option);
});
To set up Media Query in option, you must follow the following format:
option = {
baseOption: { // This is basic『Atomic options』。 title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // This defines the rule by rule for media queries.
{
query: {...}, // Write the rules here.
option: { // Write here the option that satisfies this rule.
legend: {...},
...
}
},
{
query: {...}, // The second rule.
option: { // The option corresponding to the second rule.
legend: {...},
...
}
},
{ // There is no rule written in this clause, indicating『default'』， option: { // When all rules are not met, this option is adopted.
legend: {...},
...
}
}
]
};
In the above example, baseOption, and media, each option is an “atomic option”, that is, a normal option with various components and series definitions. The whole option composed of “atomic option” is called “compound option”. BaseOption is bound to be used, in addition, when a certain query condition is met, the corresponding option will be merge in using chart.mergeOption ().
Query
Each query looks like this:
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
Three attributes are now supported: width, height, aspectRatio (aspect ratio). Each attribute can be prefixed with min or max. For example, minWidth: 200 means “greater than or equal to 200px width”. The two attributes are written together to indicate “and”, for example: {minWidth:200,300} means “greater than or equal to 200px width, and less than or equal to 300px height”.
Option
Since option in media is an “atomic option”, it is theoretically possible to write any configuration item for option. But in general, we only write about layout positioning, such as intercepting a portion of the query optionin the above example:
media: [
...,
{
query: {
maxAspectRatio: 1 // When the aspect ratio is less than 1.
},
option: {
legend: { // The legend is placed in the middle of the bottom.
right: 'center',
bottom: 0,
orient: 'horizontal' // Legend horizontal layout.
},
series: [ // Two pie charts are arranged left and right.
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // When the width of the container is less than 500.
},
option: {
legend: {
right: 10, // The legend is placed in the middle on the right side.
top: '15%',
orient: 'vertical' // Vertical layout.
},
series: [ // Two pie charts with a top and bottom layout.
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
},
...
]
Priority when multiple query are satisfied
Note that multiple query can be satisfied at the same time, all by mergeOption, followed by merge (that is, higher priority).
Default query
If there is an item in the media that does not write query, it means “default value”, that is, if all the rules are not satisfied, the option will be adopted.
Matters needing attention when changing container size in real time
In many cases, it is not necessary for the container DOM node to vary in size with drag and drop, but only to set several typical sizes according to different terminals.
However, if the container DOM node needs to be able to change in size as youdrag and drop, you need to pay attention to this: if a configuration itemappears in a query option, it must also appear in other query option, otherwise it cannot return to the original state. (left/right/top/bottom/width/height is not subject to this restriction. )
Media in “compound option” does not support merge
That is to say, when the second (or three, four, five.) chart.setOption(rawOption) if the rawOption is a composite option (that is, contains a list of media), the new rawOption.media list does not merge the old media list, but simply replaces it. That’s for sure, rawOption.baseOption merge will still be done with normal and old option. In fact, there are very few scenarios that need to use “composite option” to setOption multiple times, and our recommended practice is to use”compound option” for the first setOption when using mediaQuery, and only”atomic option” for later setOption, that is, only setOption is used to change the baseOption. Below we use jQuery to load external data, and we need to introduce the jQuery library when using it. This example is an example of combining with the timeline:
Example
$.when(
$.getScript('https://www.runoob.com/static/js/timelineGDP.js'),
$.getScript('https://www.runoob.com/static/js/draggable.js')
).done(function () {
draggable.init(
$('div[_echarts_instance_]')[0],
myChart,
{
width: 700,
height: 630,
lockY: true,
throttle: 70
}
);
myChart.hideLoading();
var categoryData = [
'Beijing', 'Tianjin', 'Hebei', 'Shanxi', 'Inner Mongolia', 'Liaoning', 'Jilin', 'Heilongjiang',
'Shanghai', 'Jiangsu, 'Zhejiang', 'Anhui', 'Fujian', 'Jiangxi', 'Shandong', 'Henan',
'Hubei', 'Hunan', 'Guangdong', 'Guangxi', 'Hainan', 'Chongqing', 'Sichuan', 'Guizhou',
'Yunnan', 'Xizang', 'Shaanxi', 'Gansu', 'Qinghai', 'Ningxia', 'Xinjiang'];
option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: [
'2002-01-01', '2003-01-01', '2004-01-01',
'2005-01-01', '2006-01-01', '2007-01-01',
'2008-01-01', '2009-01-01', '2010-01-01',
'2011-01-01'
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
title: {
subtext: 'Media Query example'
},
tooltip: {
trigger:'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
name: 'GDP（亿元）',
max: 30000,
data: null
},
yAxis: {
type: 'category',
data: categoryData,
axisLabel: {interval: 0},
splitLine: {show: false}
},
legend: {
data: ['Primary industry', 'secondary industry', 'tertiary industry', 'GDP', 'finance', and 'real estate'],
selected: {
'GDP': false, 'finance': false, 'real estate': false
}
},
calculable : true,
series: [
{name: 'GDP', type: 'bar'},
{name: 'Finance', type: 'bar'},
{name: 'Real estate', type: 'bar'},
{name: 'Primary industry', type: 'bar'},
{name: 'Secondary industry', type: 'bar'},
{name: 'Tertiary industry', type: 'bar'},
{name: 'GDP proportion', type: 'pie'}
]
},
media: [
{
option: {
legend: {
orient: 'horizontal',
left: 'right',
itemGap: 10
},
grid: {
left: '10%',
top: 80,
right: 90,
bottom: 100
},
xAxis: {
nameLocation: 'end',
nameGap: 10,
splitNumber: 5,
splitLine: {
show: true
}
},
timeline: {
orient: 'horizontal',
inverse: false,
left: '20%',
right: '20%',
bottom: 10,
height: 40
},
series: [
{name: 'GDP proportion', center: ['75%', '30%'],
radius: '28%'}
]
}
},
{
query: {maxWidth: 670, minWidth: 550},
option: {
legend: {
orient: 'horizontal',
left: 200,
itemGap: 5
},
grid: {
left: '10%',
top: 80,
right: 90,
bottom: 100
},
xAxis: {
nameLocation: 'end',
nameGap: 10,
splitNumber: 5,
splitLine: {
show: true
}
},
timeline: {
orient: 'horizontal',
inverse: false,
left: '20%',
right: '20%',
bottom: 10,
height: 40
},
series: [
{name: 'GDP proportion', center: ['75%', '30%'],
radius: '28%'}
]
}
},
{
query: {maxWidth: 550},
option: {
legend: {
orient: 'vertical',
left: 'right',
itemGap: 5
},
grid: {
left: 55,
top: '32%',
right: 100,
bottom: 50
},
xAxis: {
nameLocation: 'middle',
nameGap: 25,
splitNumber: 3
},
timeline: {
orient: 'vertical',
inverse: true,
right: 10,
top: 150,
bottom: 10,
width: 55
},
series: [
{name: 'GDP proportion', center: ['45%', '20%'],
radius: '28%'}
]
}
}
],
options: [
{
title: {text: '2002 National Macroeconomic Indicators'},
series: [
{data: dataMap.dataGDP['2002']},
{data: dataMap.dataFinancial['2002']},
{data: dataMap.dataEstate['2002']},
{data: dataMap.dataPI['2002']},
{data: dataMap.dataSI['2002']},
{data: dataMap.dataTI['2002']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2002sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2002sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2002sum']}
]}
]
},
{
title : {text: '2003 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2003']},
{data: dataMap.dataFinancial['2003']},
{data: dataMap.dataEstate['2003']},
{data: dataMap.dataPI['2003']},
{data: dataMap.dataSI['2003']},
{data: dataMap.dataTI['2003']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2003sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2003sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2003sum']}
]}
]
},
{
title : {text: '2004National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2004']},
{data: dataMap.dataFinancial['2004']},
{data: dataMap.dataEstate['2004']},
{data: dataMap.dataPI['2004']},
{data: dataMap.dataSI['2004']},
{data: dataMap.dataTI['2004']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2004sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2004sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2004sum']}
]}
]
},
{
title : {text: '2005 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2005']},
{data: dataMap.dataFinancial['2005']},
{data: dataMap.dataEstate['2005']},
{data: dataMap.dataPI['2005']},
{data: dataMap.dataSI['2005']},
{data: dataMap.dataTI['2005']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2005sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2005sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2005sum']}
]}
]
},
{
title : {text: '2006 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2006']},
{data: dataMap.dataFinancial['2006']},
{data: dataMap.dataEstate['2006']},
{data: dataMap.dataPI['2006']},
{data: dataMap.dataSI['2006']},
{data: dataMap.dataTI['2006']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2006sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2006sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2006sum']}
]}
]
},
{
title : {text: '2007 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2007']},
{data: dataMap.dataFinancial['2007']},
{data: dataMap.dataEstate['2007']},
{data: dataMap.dataPI['2007']},
{data: dataMap.dataSI['2007']},
{data: dataMap.dataTI['2007']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2007sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2007sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2007sum']}
]}
]
},
{
title : {text: '2008 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2008']},
{data: dataMap.dataFinancial['2008']},
{data: dataMap.dataEstate['2008']},
{data: dataMap.dataPI['2008']},
{data: dataMap.dataSI['2008']},
{data: dataMap.dataTI['2008']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2008sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2008sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2008sum']}
]}
]
},
{
title : {text: '2009 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2009']},
{data: dataMap.dataFinancial['2009']},
{data: dataMap.dataEstate['2009']},
{data: dataMap.dataPI['2009']},
{data: dataMap.dataSI['2009']},
{data: dataMap.dataTI['2009']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2009sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2009sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2009sum']}
]}
]
},
{
title : {text: '2010 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2010']},
{data: dataMap.dataFinancial['2010']},
{data: dataMap.dataEstate['2010']},
{data: dataMap.dataPI['2010']},
{data: dataMap.dataSI['2010']},
{data: dataMap.dataTI['2010']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2010sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2010sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2010sum']}
]}
]
},
{
title : {text: '2011 National macroeconomic indicators'},
series : [
{data: dataMap.dataGDP['2011']},
{data: dataMap.dataFinancial['2011']},
{data: dataMap.dataEstate['2011']},
{data: dataMap.dataPI['2011']},
{data: dataMap.dataSI['2011']},
{data: dataMap.dataTI['2011']},
{data: [
{name: 'Primary industry', value:
dataMap.dataPI['2011sum']},
{name: 'Secondary industry', value:
dataMap.dataSI['2011sum']},
{name: 'Tertiary industry', value:
dataMap.dataTI['2011sum']}
]}
]
}
]
};
myChart.setOption(option);
});