Echart 是一個基於javascript的開源資訊圖表函示庫，主要是提供資料可視化的功能，什麼是資料可視化呢？資料視覺化的意思是將需要用到的資料以圖表的方式去呈現，例如我們日常生活中常會用到的長條圖、折線圖、圓餅圖等，都是一種資料可視化的方式。

//在HTML頁面中創建要放入圖表的容器

創建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物件進行圖表實現。