echarts 實例
一個網頁中可以創(chuàng)建多個 echarts 實例。
每個 echarts 實例中可以創(chuàng)建多個圖表和坐標系等等（用 option 來描述）岸售。
準備一個 DOM 節(jié)點（作為 echarts 的渲染容器）吏夯，就可以在上面創(chuàng)建一個 echarts 實例掸刊。每個 echarts 實例獨占一個 DOM 節(jié)點琢蛤。
系列（series）
在 echarts 里害捕，系列（series）是指：一組數值以及他們映射成的圖鹰晨。
一個 系列 包含的要素至少有：一組數值墨叛、圖表類型（series.type）止毕、以及其他的關于這些數據如何映射成圖的參數。
說人話就是漠趁，系列 這個東西就是用來描述圖表的扁凛，包含了圖表的數據、圖表是什么類型：line（折線圖）闯传、bar（柱狀圖）谨朝、pie（餅圖）... 、以及其它的構成參數甥绿。
也可以有另一種配置方式字币，系列的數據從 dataset 中取：
組件（component）
在系列之上共缕，echarts 中各種內容洗出，被抽象為“組件”。
例如图谷，echarts 中至少有這些組件：xAxis（直角坐標系 X 軸）翩活、yAxis（直角坐標系 Y 軸）、grid（直角坐標系底板）便贵、angleAxis（極坐標系角度軸）菠镇、radiusAxis（極坐標系半徑軸）、polar（極坐標系底板）嫉沽、geo（地理坐標系）辟犀、dataZoom（數據區(qū)縮放組件）、visualMap（視覺映射組件）绸硕、tooltip（提示框組件）堂竟、toolbox（工具欄組件）、series（系列）玻佩、...
我們注意到出嘹，其實 系列（series）也是一種組件，可以理解為：系列是專門繪制“圖”的組件咬崔。
如下圖税稼，右側的 option 中聲明了各個組件（包括系列），各個組件就出現在圖中垮斯。
option 配置對象
echarts 的使用者郎仆，使用 option 來描述其對圖表的各種需求，包括：有什么數據兜蠕、要畫什么圖表扰肌、圖表長什么樣子、含有什么組件熊杨、組件能操作什么事情等等曙旭。簡而言之盗舰，option 描述了：數據、數據如何映射成圖形桂躏、交互行為钻趋。
// 創(chuàng)建 echarts 實例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `數據`剂习、`數據如何映射成圖形`蛮位、`交互行為` 等。
// option 是個大的 JavaScript 對象鳞绕。
var option = {
// option 每個屬性是一類組件土至。
legend: {...},
grid: {...},
tooltip: {...},
toolbox: {...},
dataZoom: {...},
visualMap: {...},
// 如果有多個同類組件，那么就是個數組猾昆。例如這里有三個 X 軸。
xAxis: [
// 數組每項表示一個組件實例骡苞，用 type 描述“子類型”垂蜗。
{type: 'category', ...},
{type: 'category', ...},
{type: 'value', ...}
],
yAxis: [{...}, {...}],
// 這里有多個系列，也是構成一個數組解幽。
series: [
// 每個系列贴见，也有 type 描述“子類型”，即“圖表類型”躲株。
{type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
{type: 'line', data: [2231, 1234, 552, ... ]},
{type: 'line', data: [[4, 51], [8, 12], ... ]}
}]
};
// 調用 setOption 將 option 輸入 echarts片部，然后 echarts 渲染圖表。
chart.setOption(option);
系列里的 series.data 是本系列的數據霜定。也可以使用另一種方式档悠，系列數據從 dataset 中取：
var option = {
dataset: {
source: [
[121, 'XX', 442, 43.11],
[663, 'ZZ', 311, 91.14],
[913, 'ZZ', 312, 92.12],
...
]
},
xAxis: {},
yAxis: {},
series: [
// 數據從 dataset 中取望浩，encode 中的數值是 dataset.source 的維度 index （即第幾列）
{type: 'bar', encode: {x: 1, y: 0}},
{type: 'bar', encode: {x: 1, y: 2}},
{type: 'scatter', encode: {x: 1, y: 3}},
...
]
};
組件的定位
多數組件和系列辖所，都能夠基于 top / right / down / left / width / height 絕對定位。
這種絕對定位的方式磨德，類似于 CSS 的絕對定位（position: absolute）缘回。絕對定位基于的是 echarts 容器 DOM 節(jié)點。
它們的值可以是
-
絕對數值（例如
bottom: 54表示：距離 echarts 容器底邊界54像素）典挑。 - 或基于 echarts 容器高寬的百分比（例如
right: '20%'表示：距離 echarts 容器右邊界的距離是 echarts 容器寬度的20%）酥宴。
如下圖的例子，對 grid 組件（也就是直角坐標系的底板）設置 left您觉、right拙寡、height、bottom 達到的效果顾犹。
我們可以注意到倒庵，left right width 是一組（橫向）褒墨、top bottom height 是另一組（縱向）。這兩組沒有什么關聯(lián)擎宝。每組中郁妈，至多設置兩項就可以了，第三項會被自動算出绍申。例如噩咪，設置了 left 和 right 就可以了，width 會被自動算出极阅。
坐標系
坐標系用于布局胃碾，以及顯示數據的刻度等等。一個坐標系筋搏，可能由多個組件協(xié)作而成仆百。我們以最常見的直角坐標系來舉例。直角坐標系中奔脐，包括有 xAxis（直角坐標系 X 軸）俄周、yAxis（直角坐標系 Y 軸）、grid（直角坐標系底板）三種組件髓迎。xAxis峦朗、yAxis 被 grid 自動引用并組織起來，共同工作排龄。
下圖波势，只聲明了 xAxis、yAxis 和一個 scatter（散點圖系列）橄维，echarts 暗自為他們創(chuàng)建了 grid 并關聯(lián)起他們：
再來看兩個 yAxis尺铣，共享了一個 xAxis 的例子。兩個 series挣郭，也共享了這個 xAxis迄埃，但是分別使用不同的 yAxis，使用 yAxisIndex 來指定它自己使用的是哪個 yAxis：
還存在一個 echarts 實例中兑障，有多個 grid 的情況侄非，每個 grid 分別有 xAxis、yAxis流译，他們使用 xAxisIndex逞怨、yAxisIndex、gridIndex 來指定引用關系：
另外福澡，一個系列叠赦，往往能運行在不同的坐標系中。例如，一個 scatter（散點圖）能運行在 直角坐標系除秀、極坐標系 糯累、地理坐標系（GEO） 等各種坐標系中。同樣册踩，一個坐標系泳姐，也能承載不同的系列，如上面出現的各種例子暂吉，直角坐標系里承載了 line（折線圖）胖秒、bar（柱狀圖）等等。
