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　设置图形容器的样式