Echart 是一個基於javascript的開源資訊圖表函示庫，主要是提供資料可視化的功能，什麼是資料可視化呢？資料視覺化的意思是將需要用到的資料以圖表的方式去呈現，例如我們日常生活中常會用到的長條圖、折線圖、圓餅圖等，都是一種資料可視化的方式。
//在HTML頁面中創建要放入圖表的容器
<div style=”width: 500px;height:400px><div>
創建Echart實體
var chart = echart.init(
document.getElementByd(‘main’));
//設定圖表選項和資料
var option = {
title: {
text=’折線圖’
},
tooltip:{},
xAxis:{
data:{‘周一’,’周二’, ’周三’ ,’周四’, ’周五
’, ’周六’,’週日’},
xAxis:{},
series : [{
name : ‘數量’,
type : ’line’
data : [8,42,65,84,156,56,45]
}]
};
//將變數option設定的圖表選項帶入echart實現圖表
Chart.setOption(option);
接下來將要介紹ECharts裡面常會用到的物件方法跟屬性。
1.echart.init(document.getElementByd(‘main’));
這方法能夠初始化Echarts,以HTML中的DOM節點為參數，進行如器的初始化，讓Echart能夠產生圖表。
2.option{…}
決定圖表如何生成的物件，可以用來設定圖表的標題、x軸、y軸、圖表中的資料等，是echart當中必要實作的物件。
3.Option.title
是一個負責設定圖表標題的物件，裡面會包含許多的屬性其中常見的有：
text：圖表標題中的文字。
textStyle：這也是一個物件，負責標題文字的渲染，其中的屬性通常都是用來設定顏色、大小、字型等。
show：用來決定是否要顯示標題。
link：標題的連結。
target：決定點擊標題連結後開啟視窗的方式。
‘self’是在當前視窗打開
‘blank’是在新的視窗中打開
4.yAxis
是用來設定圖表的y軸：
4.1 type：坐標軸類型，裡面有四種屬性可以坐使用。
value：數值軸，這是最常使用到的屬性，較適合用在需要顯示連續數值的地方。
categeory：類別軸，較適合使用在需要以類別來分類的情況中。
time：時間軸。
log：對數軸，比較少被使用到。
4.2 name：軸的名稱，用來解釋軸代表的意思。
4.3 nameLocation：軸名位置的擺放，提供start,middle,center,end來將軸名分別放在上面、中間、下面。
4.4data：定義Y軸資料表。
5.legend
圖表標籤相關設定，包括顏色、名稱、顯示、方式、顯示位置等。
orient：圖表標籤的擺放方式，提供水平跟垂直兩種顯示方式。
formatter：自訂標籤顯示模板。
6.seris
為物件的陣列，用來設定圖表資料。
type:決定使用何種圖表類型，例如用line能設定折線圖，用bar可以設定柱狀圖等。
name：軸的名稱。
data：定義資料。
7.tooltip：用來設定圖表提示框，決定提示框以何種方式呈現，並設定觸發提示框顯示的方式：
show：布林值，是否顯示提示框，預設為true。
trigger：三種選項：
item：通常用於資料類圖形顯示，如圓餅圖、散點圖。
axis：通常用於座標類圖形顯示，如柱狀圖、折線圖。
none：不觸發。
triggerOn：觸發提示框顯示的方法，目前支援mousemove和click兩種方式。
formatter：自訂提示框顯示模板
8.toolbox ：圖表工具箱，具備圖表區域放大、下載圖表、切換圖表顯示方式等功能。
orient：工具箱的擺放方式，提供水平跟垂直兩種顯示方式。 預設為水平。
feature：物件，為工具箱核心功能設定，提供多種功能使圖表更靈活：
saveAslmage：將圖表儲存為圖片，另還可對此進行設定，例如圖片下載的副檔名、名稱等。
dataView：展現目前所使用的資料，可對其進行編輯，並使圖表動態更新。
dataZoom：圖表資料的縮放功能，目前只支援直角坐標系列的圖表使用。
magicType：物件，可使用該物件下的type屬性進行動態圖表 顯示的定義，例如從折線圖轉成柱狀圖。
restore：重置已被調整過的圖表。
9.setOption：初始化Echarts後，定義圖表如何顯示的物件方法。 需傳入實作後的option物件進行圖表實現。