{{ target: series-themeRiver }}

series.themeRiver(Object)

** 主题河流 **

是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。

示例：

~700x580

主题河流中不同颜色的条带状河流分支编码了不同的事件或主题，河流分支的宽度编码了原数据集中的value值。

此外，原数据集中的时间属性，映射到单个时间轴上。

const option = { singleAxis: { top: 50, bottom: 50, axisTick: {}, axisLabel: {}, type: ‘time’, axisPointer: { animation: true, label: { show: true } }, splitLine: { show: true, lineStyle: { type: ‘dashed’, opacity: 0.2 } } }, series: [ { type: ‘themeRiver’, data: [[‘2015/11/08’,10,‘DQ’],[‘2015/11/09’,15,‘DQ’],[‘2015/11/10’,35,‘DQ’], [‘2015/11/11’,38,‘DQ’],[‘2015/11/12’,22,‘DQ’],[‘2015/11/13’,16,‘DQ’], [‘2015/11/14’,7,‘DQ’],[‘2015/11/15’,2,‘DQ’],[‘2015/11/16’,17,‘DQ’], [‘2015/11/17’,33,‘DQ’],[‘2015/11/18’,40,‘DQ’],[‘2015/11/19’,32,‘DQ’], [‘2015/11/20’,26,‘DQ’],[‘2015/11/21’,35,‘DQ’],[‘2015/11/22’,40,‘DQ’], [‘2015/11/23’,32,‘DQ’],[‘2015/11/24’,26,‘DQ’],[‘2015/11/25’,22,‘DQ’], [‘2015/11/26’,16,‘DQ’],[‘2015/11/27’,22,‘DQ’],[‘2015/11/28’,10,‘DQ’], [‘2015/11/08’,35,‘TY’],[‘2015/11/09’,36,‘TY’],[‘2015/11/10’,37,‘TY’], [‘2015/11/11’,22,‘TY’],[‘2015/11/12’,24,‘TY’],[‘2015/11/13’,26,‘TY’], [‘2015/11/14’,34,‘TY’],[‘2015/11/15’,21,‘TY’],[‘2015/11/16’,18,‘TY’], [‘2015/11/17’,45,‘TY’],[‘2015/11/18’,32,‘TY’],[‘2015/11/19’,35,‘TY’], [‘2015/11/20’,30,‘TY’],[‘2015/11/21’,28,‘TY’],[‘2015/11/22’,27,‘TY’], [‘2015/11/23’,26,‘TY’],[‘2015/11/24’,15,‘TY’],[‘2015/11/25’,30,‘TY’], [‘2015/11/26’,35,‘TY’],[‘2015/11/27’,42,‘TY’],[‘2015/11/28’,42,‘TY’], [‘2015/11/08’,21,‘SS’],[‘2015/11/09’,25,‘SS’],[‘2015/11/10’,27,‘SS’], [‘2015/11/11’,23,‘SS’],[‘2015/11/12’,24,‘SS’],[‘2015/11/13’,21,‘SS’], [‘2015/11/14’,35,‘SS’],[‘2015/11/15’,39,‘SS’],[‘2015/11/16’,40,‘SS’], [‘2015/11/17’,36,‘SS’],[‘2015/11/18’,33,‘SS’],[‘2015/11/19’,43,‘SS’], [‘2015/11/20’,40,‘SS’],[‘2015/11/21’,34,‘SS’],[‘2015/11/22’,28,‘SS’], [‘2015/11/23’,26,‘SS’],[‘2015/11/24’,37,‘SS’],[‘2015/11/25’,41,‘SS’], [‘2015/11/26’,46,‘SS’],[‘2015/11/27’,47,‘SS’],[‘2015/11/28’,41,‘SS’], [‘2015/11/08’,10,‘QG’],[‘2015/11/09’,15,‘QG’],[‘2015/11/10’,35,‘QG’], [‘2015/11/11’,38,‘QG’],[‘2015/11/12’,22,‘QG’],[‘2015/11/13’,16,‘QG’], [‘2015/11/14’,7,‘QG’],[‘2015/11/15’,2,‘QG’],[‘2015/11/16’,17,‘QG’], [‘2015/11/17’,33,‘QG’],[‘2015/11/18’,40,‘QG’],[‘2015/11/19’,32,‘QG’], [‘2015/11/20’,26,‘QG’],[‘2015/11/21’,35,‘QG’],[‘2015/11/22’,40,‘QG’], [‘2015/11/23’,32,‘QG’],[‘2015/11/24’,26,‘QG’],[‘2015/11/25’,22,‘QG’], [‘2015/11/26’,16,‘QG’],[‘2015/11/27’,22,‘QG’],[‘2015/11/28’,10,‘QG’], [‘2015/11/08’,10,‘SY’],[‘2015/11/09’,15,‘SY’],[‘2015/11/10’,35,‘SY’], [‘2015/11/11’,38,‘SY’],[‘2015/11/12’,22,‘SY’],[‘2015/11/13’,16,‘SY’], [‘2015/11/14’,7,‘SY’],[‘2015/11/15’,2,‘SY’],[‘2015/11/16’,17,‘SY’], [‘2015/11/17’,33,‘SY’],[‘2015/11/18’,40,‘SY’],[‘2015/11/19’,32,‘SY’], [‘2015/11/20’,26,‘SY’],[‘2015/11/21’,35,‘SY’],[‘2015/11/22’,4,‘SY’], [‘2015/11/23’,32,‘SY’],[‘2015/11/24’,26,‘SY’],[‘2015/11/25’,22,‘SY’], [‘2015/11/26’,16,‘SY’],[‘2015/11/27’,22,‘SY’],[‘2015/11/28’,10,‘SY’], [‘2015/11/08’,10,‘DD’],[‘2015/11/09’,15,‘DD’],[‘2015/11/10’,35,‘DD’], [‘2015/11/11’,38,‘DD’],[‘2015/11/12’,22,‘DD’],[‘2015/11/13’,16,‘DD’], [‘2015/11/14’,7,‘DD’],[‘2015/11/15’,2,‘DD’],[‘2015/11/16’,17,‘DD’], [‘2015/11/17’,33,‘DD’],[‘2015/11/18’,4,‘DD’],[‘2015/11/19’,32,‘DD’], [‘2015/11/20’,26,‘DD’],[‘2015/11/21’,35,‘DD’],[‘2015/11/22’,40,‘DD’], [‘2015/11/23’,32,‘DD’],[‘2015/11/24’,26,‘DD’],[‘2015/11/25’,22,‘DD’], [‘2015/11/26’,16,‘DD’],[‘2015/11/27’,22,‘DD’],[‘2015/11/28’,10,‘DD’]] } ] };

type(string) = ‘themeRiver’

{{ use: partial-component-id( prefix = “#” ) }}

{{ use: partial-series-name() }}

{{ use: partial-colorby(defaultColorBy=“‘data’”) }}

{{ use: partial-rect-layout-width-height( componentName = ‘thmemRiver’, defaultLeft = ‘5%’, defaultRight = ‘5%’, defaultTop = ‘5%’, defaultBottom = ‘5%’, defaultWidth = ‘null’, defaultHeight = ‘null’ ) }}

** 注意：** 整个主题河流view的位置信息复用了单个时间轴的位置信息，即left，top，right，bottom。

coordinateSystem(string) = “single”

坐标系统，主题河流用的是单个的时间轴。

boundaryGap(Array) = [“10%”, “10%”]

图中与坐标轴正交的方向的边界间隙，设置该值是为了调整图的位置，使其尽量处于屏幕的正中间，避免处于屏幕的上方或下方。

singleAxisIndex(number) = 0

单个时间轴的index，默认值为0，因为只有单个轴。

label(Object)

label 描述了主题河流中每个带状河流分支对应的文本标签的样式。

{{ use: partial-label( prefix = “##”, defaultShowLabel = true, defaultPosition = “‘left’”, defaultMargin = 4, noAlign = true, noVerticalAlign = true, defaultColor = “‘#000’”, defaultFontSize = 11 ) }}

labelLine(Object)

{{ use: partial-label-line-desc() }}

{{ use: partial-label-line( prefix = ‘##’, length2 = true, minTurnAngle = true, showAbove = true, smooth = true ) }}

labelLayout(Object|Function)

{{ use: partial-label-layout( prefix = “##” ) }}

itemStyle(Object)

主题河流中每个带状河流分支的样式。

{{ use: partial-item-style( prefix = “##”, useDecal = true ) }}

emphasis(Object)

高亮状态的配置。

{{ use: partial-focus-blur-scope() }}

{{ use: themeRiver-state( prefix = “##”, state = ‘emphasis’ ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

淡出状态的配置。

{{ use: themeRiver-state( prefix = “##”, state = ‘blur’ ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

选中状态的配置。

{{ use: themeRiver-state( prefix = “##”, state = ‘select’ ) }}

{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}

data(Array)

data: [
    ["2015/11/09",10,"DQ"],
    ["2015/11/10",10,"DQ"],
    ["2015/11/11",10,"DQ"],
    ["2015/11/08",10,"SS"],
    ["2015/11/09",10,"SS"],
    ["2015/11/10",10,"SS"],
    ["2015/11/11",10,"SS"],
    ["2015/11/12",10,"SS"],
    ["2015/11/13",10,"QG"],
    ["2015/11/08",10,"QG"],
    ["2015/11/11",10,"QG"],
    ["2015/11/13",10,"QG"],
]

数据说明：

如上所示，主题河流的数据格式是二维数组的形式，里层数组的每一项由事件或主题的时间属性、事件或主题在某个时间点的值，以及事件或主题的名称组成。值得注意的是，一定要提供一个具有完整时间段的事件或主题作为主干河流，其他事件或主题以该主干河流为依据，将缺省的时间点上的值补为0，也就是说其他事件或主题的时间段是包含在主干河流内的，如果超出，布局会出错，这么做的原因是，在计算整个图的布局的时候要计算一条baseline，以便将每个事情画成流带状。如上图中的“SS”这一事件就是一个主干河流，经过处理，我们会将“DQ”中缺省的三个时间点以[“2015/11/08”,0,“DQ”]，[“2015/11/12”,0,“DQ”]，［“2015/11/13”,0,“DQ”］的格式补齐，使其与主干河流对其。从中还可以看出，我们可以在完整时间段的任意位置缺省。

date(string)

时间或主题的时间属性。

value(number)

事件或主题在某个时间点的值。

name(string)

事件或主题的名称。

{{ use: partial-tooltip-in-series() }}

{{ target: themeRiver-state }}

#${prefix} label(Object)

{{ use: partial-label( prefix = “#” + ${prefix}, defaultPosition = “‘left’”, defaultMargin = 4, noAlign = true, noVerticalAlign = true, defaultColor = “‘#000’”, defaultFontSize = 11 ) }}

#${prefix} labelLine(Object)

{{ use: partial-label-line-desc() }}

{{ use: partial-label-line( prefix = ‘#’ + ${prefix} ) }}

#${prefix} itemStyle(Object)

{{ use: partial-item-style( prefix = “#” + ${prefix}, hasInherit = ${state} === ‘emphasis’ ) }}