2.11　双y轴折线图

双y轴折线图可以将两种数据系列放置在同一个坐标系中，从而反映两者之间的关系。

由于本节以COVID-19国内疫情数据中的湖北省每日新增死亡人数和总计死亡人数作为制作双y轴折线图的数据，所以需要定义一个新类—Line_DataStruct3，这个新类只需要在1.5.1节定义的类的基础上添加DataList_TotalDeath、DataList_NewDeath、TypeList成员，并在构造函数中实例化这些成员即可，如程序代码2-20所示。

程序代码2-20　添加新类和新成员，并在构造函数中实例化新成员

在2.4节的基础上，首先将本节调用的函数名改为getLineData3；然后将ECharts中图例所需要的数据设为“新增死亡人数”和“总计死亡人数”，如程序代码2-21所示；接着将需要访问的两个shp文件HBdeath_0302和HBdeath_NewPositive放进一个长度为2的数组中，通过for循环依次访问这两个文件，如程序代码2-22所示，字段名和字段值的处理方法与2.4节中的方法一样；最后通过if语句，将相应文件中的数据存入对应的数组中，如程序代码2-23所示。

程序代码2-21　添加类型

程序代码2-22　访问两个shp文件

程序代码2-23　保存查询到的数据

在2.4节的基础上，本节的宿主程序也直接使用1.5.3节的宿主程序，完成后台REST服务后，只需要利用option中的部分属性设置图形样式即可，具体参数设置说明如下：

subtext：副标题文本，支持使用“\n”换行。

subtextStyle：副标题样式，可通过subtextStyle.color设置副标题颜色。

title.left：表示title组件离容器左侧的距离。left的值既可以是具体的像素值，如20；也可以是相对于容器高宽的百分比，如20%；还可以是left、center、right。如果left的值为left、center、right，则组件会根据相应的位置自动对齐。

title.align：表示文字水平对齐方式，默认自动，可选left、center、right。如果组件没有设置align，则会取父层级的align。

animation：表示是否开启动画，当animation为false时，表示关闭动画；当animation为true时，表示开启动画。

以上参数的具体设置如程序代码2-24所示。

程序代码2-24　设置图形样式

在dataZoom中，部分参数的说明如下：

dataZoom-inside.show：用于设置是否显示组件。如果设置为false，则不会显示，但数据过滤的功能还存在。

dataZoom-inside.backgroundColor：用于设置组件的背景颜色。

dataZoom-inside.fillerColor：用于设置选中范围的填充颜色。

dataZoom-inside.borderColor：用于设置边框颜色。

realtime：用于设置实时显示，当它取值为true时，拖曳或单击时间轴会实时显示相应的数据。

start：用于设置数据窗口范围的起始百分比，范围为0～100，表示0%～100%。

end：用于设置数据窗口范围的结束百分比，范围为0～100。start和end共同用百分比的形式定义数据窗口范围。

以上参数的具体设置如程序代码2-25所示。

程序代码2-25　设置区域缩放器的样式

2.4节已经设置了xAxis中的部分属性，本节需要的xAxis其他属性说明如下：

axisLine：坐标轴的轴线，其中onZero表示x轴或者y轴的轴线是否在另一个轴的0刻度上，只有在另一个轴为数值轴且包含0刻度时axisLine才有效。

nameLocation：坐标轴名称显示位置。可选start、middle、center、end。

inverse：是否反转坐标轴。本节设置新增死亡人数在y轴左侧反转。

max：坐标轴刻度最大值。可以设置成特殊值dataMax，此时取数据在该轴上的最大值作为最大刻度。不设置max时会自动计算最大值并保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数，当设置成函数形式时，可以根据函数计算得出的数据最大值和最小值设定坐标轴的最小值。

data：通过调用后台REST服务获取到的DateList数组。

以上参数的具体设置如程序代码2-26所示。

程序代码2-26　设置x、y轴样式

yAxisIndex：使用的y轴的index，用于单个图表实例中存在多个y轴的情况。yAxisIndex可以取0或1，当取1时，表示在y轴右侧显示总计死亡人数。

markArea：图表标域，表示图表中某个范围的数据。

markArea.silent：表示图形是否不响应和不触发鼠标事件，默认为false，即响应和触发鼠标事件。当markArea.silent为true时，表示不触发鼠标事件。

markArea.data：markArea.data是图表标域的数据数组，每个数组项是一个包含两个数的数组，分别表示图表标域左上角和右下角的位置，可通过下面几种方式指定位置：①通过x轴和y轴的属性来指定相对容器的屏幕坐标，单位为像素，也支持百分比的形式；②用coord属性指定数据在相应坐标系上的坐标位置，单个维度可设置min、max、average；③直接用type属性标注系列中的最大值和最小值，可以使用valueIndex或者valueDim指定维度上的最大值、最小值、平均值；④如果是笛卡儿坐标系，则可以通过指定xAxis或者yAxis来实现x轴或者y轴的图表标域。

series.data：双y轴上的数据可分别通过后台REST服务返回的res.DataList_TotalDeath和res.DataList_NewDeath进行设置。

legend：legend的具体介绍请参照2.4节，在使用legend时需要注意一点，即legend中所调用的数据必须和series中的name属性数据一致。

以上参数的具体设置如程序代码2-27所示。

程序代码2-27　设置折线图填充区域的样式 tnH8ahgvyE96oLEHTN4ChbF7Has3lYejbEFtnTJF0jkIrpKUgRLIc/v0YAT0fNyI