ECharts系列：主題河流圖

在ECharts系列中，使用series[i]-themeRiver設(shè)置主題河流圖，主題河流圖是一種特殊的流圖，它主要用來(lái)表示事件或主題等在一段時(shí)間內(nèi)的變化。

示例：

主題河流圖可視編碼

主題河流中不同顏色的條帶狀河流分支編碼了不同的事件或主題，河流分支的寬度編碼了原數(shù)據(jù)集中的value值。

此外，原數(shù)據(jù)集中的時(shí)間屬性，映射到單個(gè)時(shí)間軸上。

主題河流圖屬性

type

在ECharts中主題河流圖的type屬性值為'themeRiver'。

zlevel

所有圖形的 zlevel 值，默認(rèn)為 0。

zlevel用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見(jiàn)的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫(huà)）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過(guò)多的 Canvas 會(huì)引起內(nèi)存開(kāi)銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

z

組件的所有圖形的z值，默認(rèn)為 2?？刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。

left

thmemRiver組件離容器左側(cè)的距離，默認(rèn)為 5%（下述的top、right、bottom屬性的默認(rèn)值也為 5%）。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

top

thmemRiver組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

right

thmemRiver組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

bottom

thmemRiver組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

width

thmemRiver組件的寬度。

height

thmemRiver組件的高度。

注意： 整個(gè)主題河流view的位置信息復(fù)用了單個(gè)時(shí)間軸的位置信息，即left，top，right，bottom。

coordinateSystem

坐標(biāo)系統(tǒng)，主題河流用的是單個(gè)的時(shí)間軸。默認(rèn)為single。

boundaryGap

圖中與坐標(biāo)軸正交的方向的邊界間隙，設(shè)置該值是為了調(diào)整圖的位置，使其盡量處于屏幕的正中間，避免處于屏幕的上方或下方。默認(rèn)值為["10%", "10%"]。

singleAxisIndex

單個(gè)時(shí)間軸的index，默認(rèn)值為0，因?yàn)橹挥袉蝹€(gè)軸。

label

label 描述了主題河流中每個(gè)帶狀河流分支對(duì)應(yīng)的文本標(biāo)簽的樣式。

itemStyle

主題河流中每個(gè)帶狀河流分支的樣式。

data[i]

系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。

通常來(lái)說(shuō)，數(shù)據(jù)用一個(gè)二維數(shù)組表示。如下，每一列被稱為一個(gè)『維度』。

series: [{
    data: [
        // 維度X   維度Y   其他維度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

• 在 直角坐標(biāo)系 (grid) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 xAxis 和 yAxis。
• 在 極坐標(biāo)系 (polar) 中『維度X』和『維度Y』會(huì)默認(rèn)對(duì)應(yīng)于 radiusAxis 和 angleAxis。
• 后面的其他維度是可選的，可以在別處被使用，例如：
  • 在 visualMap 中可以將一個(gè)或多個(gè)維度映射到顏色，大小等多個(gè)圖形屬性上。
  • 在 series.symbolSize 中可以使用回調(diào)函數(shù)，基于某個(gè)維度得到 symbolSize 值。
  • 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來(lái)。

特別地，當(dāng)只有一個(gè)軸為類目軸（axis.type 為 'category'）的時(shí)候，數(shù)據(jù)可以簡(jiǎn)化用一個(gè)一維數(shù)組表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對(duì)應(yīng)。
    data: [23,  44,  55,  19]
    // 它其實(shí)是下面這種形式的簡(jiǎn)化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

『值』與 軸類型 的關(guān)系：

• 當(dāng)某維度對(duì)應(yīng)于數(shù)值軸（axis.type 為 'value' 或者 'log'）的時(shí)候：
  其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）
• 當(dāng)某維度對(duì)應(yīng)于類目軸（axis.type 為 'category'）的時(shí)候：
  其值須為類目的『序數(shù)』（從 0 開(kāi)始）或者類目的『字符串值』。例如： 

    xAxis: {
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四']
    },
    yAxis: {
        type: 'category',
        data: ['a', 'b', 'm', 'n', 'p', 'q']
    },
    series: [{
        data: [
            // xAxis    yAxis
            [  0,        0,    2  ], // 意思是此點(diǎn)位于 xAxis: '星期一', yAxis: 'a'。
            [  '星期四',  2,    1  ], // 意思是此點(diǎn)位于 xAxis: '星期四', yAxis: 'm'。
            [  2,       'p',   2  ], // 意思是此點(diǎn)位于 xAxis: '星期三', yAxis: 'p'。
            [  3,        3,    5  ]
        ]  
  }]

  雙類目軸的示例可以參考 Github Punchcard 示例。
• 當(dāng)某維度對(duì)應(yīng)于時(shí)間軸（type 為 'time'）的時(shí)候，值可以為：
  • 一個(gè)時(shí)間戳，如 1484141700832，表示 UTC 時(shí)間。
  • 或者字符串形式的時(shí)間描述：
    • ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時(shí)區(qū)，否則均表示本地時(shí)間，與 moment 一致）：
      • 部分年月日時(shí)間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
      • 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
      • 時(shí)區(qū)設(shè)定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
    • 其他的時(shí)間字符串，包括（均表示本地時(shí)間）: '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
  • 或者用戶自行初始化的 Date 實(shí)例：
    • 注意，用戶自行初始化 Date 實(shí)例的時(shí)候，瀏覽器的行為有差異，不同字符串的表示也不同。
    • 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時(shí)間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時(shí)間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
    • 所以，使用 new Date(dataString) 時(shí)，可使用第三方庫(kù)解析（如 moment），或者使用 echarts.number.parseDate，或者參見(jiàn) 這里。

  當(dāng)需要對(duì)個(gè)別數(shù)據(jù)進(jìn)行個(gè)性化定義時(shí)：

  數(shù)組項(xiàng)可用對(duì)象，其中的 value 像表示具體的數(shù)值，如：

  [
      12,
      34,
      {
          value : 56,
          //自定義標(biāo)簽樣式，僅對(duì)該數(shù)據(jù)項(xiàng)有效
          label: {},
          //自定義特殊 itemStyle，僅對(duì)該數(shù)據(jù)項(xiàng)有效
          itemStyle:{}
      },
      10
  ]
  // 或
  [
      [12, 33],
      [34, 313],
      {
          value: [56, 44],
          label: {},
          itemStyle:{}
      },
      [10, 33]
  ]

  空值：

  當(dāng)某數(shù)據(jù)不存在時(shí)（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

  例如，無(wú)數(shù)據(jù)在折線圖中可表現(xiàn)為該點(diǎn)是斷開(kāi)的，在其它圖中可表示為圖形不存在。

tooltip

本系列特定的 tooltip 設(shè)定。