ECharts 教程
ECharts 圖表顯示在用戶(hù)指定高寬的 DOM 節(jié)點(diǎn)（容器）中。
有時(shí)候我們希望在 PC 和 移動(dòng)設(shè)備上都能夠很好的展示圖表的內(nèi)容，實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì)，為了解決這個(gè)問(wèn)題，ECharts 完善了組件的定位設(shè)置，并且實(shí)現(xiàn)了類(lèi)似 CSS Media Query 的自適應(yīng)能力。
大部分『組件』和『系列』會(huì)遵循兩種定位方式。
這六個(gè)量中，每個(gè)量都可以是『絕對(duì)值』或者『百分比』或者『位置描述』。
絕對(duì)值
單位是瀏覽器像素（px），用 number 形式書(shū)寫(xiě)（不寫(xiě)單位）。例如 {left: 23, height: 400}。
百分比
表示占 DOM 容器高寬的百分之多少，用 string 形式書(shū)寫(xiě)。例如 {right: '30%', bottom: '40%'}。
位置描述
left: 'center'，表示水平居中。top: 'middle'，表示垂直居中。這六個(gè)量的概念，和 CSS 中六個(gè)量的概念類(lèi)似：
在橫向，left、right、width 三個(gè)量中，只需兩個(gè)量有值即可，因?yàn)槿蝺蓚€(gè)量可以決定組件的位置和大小，例如 left 和 right 或者 right 和 width 都可以決定組件的位置和大小。 縱向，top、bottom、height 三個(gè)量，和橫向類(lèi)同不贅述。
center
是一個(gè)數(shù)組，表示 [x, y]，其中，x、y可以是『絕對(duì)值』或者『百分比』，含義和前述相同。
radius
是一個(gè)數(shù)組，表示 [內(nèi)半徑, 外半徑]，其中，內(nèi)外半徑可以是『絕對(duì)值』或者『百分比』，含義和前述相同。
在自適應(yīng)容器大小時(shí)，百分比設(shè)置是很有用的。
ECharts的『外觀狹長(zhǎng)』型的組件（如 legend、visualMap、dataZoom、timeline等），大多提供了『橫向布局』『縱向布局』的選擇。例如，在細(xì)長(zhǎng)的移動(dòng)端屏幕上，可能適合使用『縱向布局』；在PC寬屏上，可能適合使用『橫向布局』。
橫縱向布局的設(shè)置，一般在『組件』或者『系列』的 orient 或者 layout 配置項(xiàng)上，設(shè)置為 'horizontal' 或者 'vertical'。
以下實(shí)例中我們可以可嘗試拖動(dòng)右下角的圓點(diǎn)，圖表會(huì)隨著屏幕尺寸變化，legend 和 系列會(huì)自動(dòng)改變布局位置和方式。
實(shí)例中我們使用了 jQuery 來(lái)加載外部數(shù)據(jù)，使用時(shí)我們需要引入 jQuery 庫(kù)。
要在 option 中設(shè)置 Media Query 須遵循如下格式：
option = {
baseOption: { // 這里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 這里定義了 media query 的逐條規(guī)則。
{
query: {...}, // 這里寫(xiě)規(guī)則。
option: { // 這里寫(xiě)此規(guī)則滿(mǎn)足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二個(gè)規(guī)則。
option: { // 第二個(gè)規(guī)則對(duì)應(yīng)的option。
legend: {...},
...
}
},
{ // 這條里沒(méi)有寫(xiě)規(guī)則，表示『默認(rèn)』，
option: { // 即所有規(guī)則都不滿(mǎn)足時(shí)，采納這個(gè)option。
legend: {...},
...
}
}
]
};上面的例子中，baseOption、以及 media 每個(gè) option 都是『原子 option』，即普通的含有各組件、系列定義的 option。而由『原子option』組合成的整個(gè) option，我們稱(chēng)為『復(fù)合 option』。baseOption 是必然被使用的，此外，滿(mǎn)足了某個(gè) query 條件時(shí)，對(duì)應(yīng)的 option 會(huì)被使用 chart.mergeOption() 來(lái) merge 進(jìn)去。
每個(gè) query 類(lèi)似于這樣：
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}現(xiàn)在支持三個(gè)屬性：width、height、aspectRatio（長(zhǎng)寬比）。每個(gè)屬性都可以加上 min 或 max 前綴。比如，minWidth: 200 表示『大于等于200px寬度』。兩個(gè)屬性一起寫(xiě)表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px寬度，并且小于等于300px高度』。
media中的 option 既然是『原子 option』，理論上可以寫(xiě)任何 option 的配置項(xiàng)。但是一般我們只寫(xiě)跟布局定位相關(guān)的，例如截取上面例子中的一部分 query option：
media: [
...,
{
query: {
maxAspectRatio: 1 // 當(dāng)長(zhǎng)寬比小于1時(shí)。
},
option: {
legend: { // legend 放在底部中間。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 橫向布局。
},
series: [ // 兩個(gè)餅圖左右布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // 當(dāng)容器寬度小于 500 時(shí)。
},
option: {
legend: {
right: 10, // legend 放置在右側(cè)中間。
top: '15%',
orient: 'vertical' // 縱向布局。
},
series: [ // 兩個(gè)餅圖上下布局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
},
...
]注意，可以有多個(gè) query 同時(shí)被滿(mǎn)足，會(huì)都被 mergeOption，定義在后的后被 merge（即優(yōu)先級(jí)更高）。
如果 media 中有某項(xiàng)不寫(xiě) query，則表示『默認(rèn)值』，即所有規(guī)則都不滿(mǎn)足時(shí)，采納這個(gè)option。
在不少情況下，并不需要容器DOM節(jié)點(diǎn)任意隨著拖拽變化大小，而是只是根據(jù)不同終端設(shè)置幾個(gè)典型尺寸。
但是如果容器DOM節(jié)點(diǎn)需要能任意隨著拖拽變化大小，那么目前使用時(shí)需要注意這件事：某個(gè)配置項(xiàng)，如果在某一個(gè) query option 中出現(xiàn)，那么在其他 query option 中也必須出現(xiàn)，否則不能夠回歸到原來(lái)的狀態(tài)。（left/right/top/bottom/width/height 不受這個(gè)限制。）
以下中我們使用了 jQuery 來(lái)加載外部數(shù)據(jù)，使用時(shí)我們需要引入 jQuery 庫(kù)。該實(shí)例是一個(gè)和時(shí)間軸結(jié)合的例子：