1.6.2　設置ECharts圖形

使用直接引用的方法，可以通過＜link＞標簽在HTML頁面中引用ol.css樣式，同樣也可以通過＜script＞標簽在HTML頁面中引用ECharts.min.js類庫、jquery-3.4.1.min.js類庫和ol.js類庫，如程序代碼1-13所示。

程序代碼1-13　引用類庫

基于準備好的DOM，初始化ECharts實例，ECharts.init可用于創建一個ECharts實例。注意，不能在單個容器上初始化多個ECharts實例。在option設置完之后，必須指定使用的配置項和數據顯示圖表，即添加語句“myChart1.setOption（option）；”。在設置option中的參數之前，可以通過getElementById（）來訪問“lineChart”元素。

使用jQuery的getJSON方法，可以通過http：//127.0.0.1：7789/getLineData1網址調用后臺REST服務，通過回調函數的參數res獲得后臺返回的JSON數據。使用console.log方法可以在調試窗口中顯示res的值，方便查找JavaScript程序的語法或者邏輯錯誤，如程序代碼1-14所示。其實，JavaScript語言默認是沒有console對象的。console對象是瀏覽器提供的內置對象，用于訪問調試控制臺，在不同的瀏覽器里效果可能不同。console對象的常用功能有兩個：一是顯示網頁代碼運行時的錯誤信息；二是提供了一個用來與網頁代碼互動的命令行接口。

程序代碼1-14　初始化ECharts實例并調用后臺REST服務

為了生成ECharts折線圖，這里將ECharts.option中的Data數據設置成2019—2020年發生的新冠肺炎疫情數據，其中option是對象，可以以鍵值對的形式設置該對象的屬性。通過修改name、axisLabel等參數可以設置x、y軸樣式，相關參數說明如下：

xAxis.type：坐標軸類型。其中，value表示數值軸，適用于連續數據；category表示類目軸，適用于離散的類目數據，當該參數設置為category時必須通過data設置類目數據；time表示時間軸，適用于連續的時序數據，與數值軸相比，時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月、星期、日或小時范圍的刻度；log表示對數軸，適用于對數數據。

xAxis.name：x軸名稱。

xAxis.axisLabel：用于x軸刻度標簽的相關設置。通過設置axisLabel.rotate可以控制刻度標簽的旋轉角度，在類目軸的類目標簽顯示不下時可以通過旋轉來防止標簽之間的重疊，旋轉的角度為-90°～90°。

xAxis.axisLine：x軸的坐標軸線。通過xAxis.axisLine.lineStyle中的color、width參數可以設置x軸的坐標軸線顏色和寬度。其中，color可以使用RGB表示，如“rgb（128，128，128）”，如果想要加上alpha通道來表示不透明度，則可以使用RGBA，如“rgba（128，128，128，0.5）”；也可以使用十六進制格式來表示color，如“#cccfff”，該方式不僅支持純色，也支持漸變色和紋理填充。xAxis.axisLine.lineStyle.width表示x軸的坐標軸線寬度。

以上參數的具體設置如程序代碼1-15所示。

程序代碼1-15　設置x、y軸樣式

在series中，可以通過修改lineStyle、itemStyle等參數來設置圖形樣式，具體參數說明如下：

data：調用后臺REST服務返回的res.DataList。

type：值為line，表示折線圖。折線圖是用折線將各個數據點連接起來的圖表，用于展現數據的變化趨勢，可用于直角坐標系和極坐標系。

lineStyle：通過color參數設置折線的顏色。

itemStyle：通過color參數設置數據項的顏色。

以上參數的具體設置如程序代碼1-16所示。

程序代碼1-16　設置圖形樣式

設置完ECharts折線圖的樣式之后，還需要對html圖形容器的樣式進行設置。

width：用于設置寬度，可采用像素或百分比的形式來設置。

height：用于設置高度，可采用像素或百分比的形式來設置。

margin-bottom：用于設置元素的下外邊距，可采用像素或百分比的形式來設置。

border：用于在一個聲明中設置所有邊框屬性，可以按border-width、border-style、border-color的順序設置屬性，如果不設置其中的某個值，也不會出問題。

position：用于把元素放置到一個靜態的、相對的、絕對的或固定的位置中，默認值為static的元素。將position設置為static的元素時，它始終會處于頁面給定的位置（會忽略top、bottom、left或right聲明）；將position設置為relative的元素時，可將該元素移至相對于其正常位置的地方；將position設置為absolute的元素時，可定位于相對于該元素的指定坐標，該元素的位置可通過left、top、right及bottom屬性來規定；將position設置為fixed的元素時，可定位于相對于瀏覽器窗口的指定坐標，該元素的位置可通過left、top、right及bottom屬性來規定，不論窗口滾動與否，該素都會留在那個位置。需要注意的一點是，當寬度和高度都設為100%時，position只能設置為absolute的元素。

bottom：用于設置元素的底部邊緣，可以定義該元素下外邊距邊界與其包含塊下邊界之間的偏移。默認值為auto，可通過瀏覽器計算底部位置；當bottom取值為百分比的形式時，可以設置以包含元素的百分比來計算底部位置，可使用負值；當bottom的取值為length形式時，可以使用px、cm等單位設置元素的底部位置，可使用負值；當bottom的取值為inherit時，可以從父元素繼承bottom的值。如果position的值為static的元素，那么設置的bottom不會產生任何效果。

以上參數的具體設置如程序代碼1-17所示。

程序代碼1-17　設置圖形容器的樣式