建站
咨詢
售后
建站咨詢
新聞中心
在ECharts系列中，使用series[i]-themeRiver設(shè)置主題河流圖，主題河流圖是一種特殊的流圖，它主要用來(lái)表示事件或主題等在一段時(shí)間內(nèi)的變化。
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出武強(qiáng)免費(fèi)做網(wǎng)站回饋大家。
示例：
主題河流圖可視編碼
主題河流中不同顏色的條帶狀河流分支編碼了不同的事件或主題，河流分支的寬度編碼了原數(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。控制圖形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。
leftthmemRiver組件離容器左側(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ì)齊。
topthmemRiver組件離容器上側(cè)的距離。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
rightthmemRiver組件離容器右側(cè)的距離。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
bottomthmemRiver組件離容器下側(cè)的距離。
bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
widththmemRiver組件的寬度。
heightthmemRiver組件的高度。
注意： 整個(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è)軸。
labellabel 描述了主題河流中每個(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'
- ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時(shí)區(qū)，否則均表示本地時(shí)間，與 moment 一致）：
- 或者用戶自行初始化的 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è)定。
當(dāng)前文章：創(chuàng)新互聯(lián)ECharts教程：ECharts系列：主題河流圖
標(biāo)題來(lái)源：http://m.fisionsoft.com.cn/article/djdhepd.html
