ECharts系列列表：熱力圖

series[i]-heatmap

該節(jié)介紹 ECharts 中用于表示熱力圖的系列列表。

熱力圖主要通過顏色去表現(xiàn)數(shù)值的大小，必須要配合 visualMap 組件使用。

可以應(yīng)用在直角坐標(biāo)系以及地理坐標(biāo)系上，這兩個(gè)坐標(biāo)系上的表現(xiàn)形式相差很大，直角坐標(biāo)系上必須要使用兩個(gè)類目軸。

下面分別是直角坐標(biāo)系和地理坐標(biāo)系上應(yīng)用的例子：

直角坐標(biāo)系：

點(diǎn)擊編輯實(shí)例 》》

地理坐標(biāo)系：

點(diǎn)擊編輯實(shí)例 》》

熱力圖屬性

type

默認(rèn)值為 heatmap

name

設(shè)置該熱力圖系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。

coordinateSystem

該系列使用的坐標(biāo)系，可選：

• 'cartesian2d'使用二維的直角坐標(biāo)系（也稱笛卡爾坐標(biāo)系），通過 xAxisIndex、yAxisIndex 指定相應(yīng)的坐標(biāo)軸組件。

• 'geo'使用地理坐標(biāo)系，通過 geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。

xAxisIndex

使用的 x 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用。

yAxisIndex

使用的 y 軸的 index，在單個(gè)圖表實(shí)例中存在多個(gè) y軸的時(shí)候有用。

geoIndex

使用的地理坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)地理坐標(biāo)系的時(shí)候有用。

calendarIndex

使用的日歷坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)日歷坐標(biāo)系的時(shí)候有用。

blurSize

每個(gè)點(diǎn)模糊的大小，默認(rèn)模糊大小為 20，在地理坐標(biāo)系(coordinateSystem: 'geo')上有效。

minOpacity

最小的透明度，在地理坐標(biāo)系(coordinateSystem: 'geo')上有效。

maxOpacity

最大的透明度，值為1，在地理坐標(biāo)系(coordinateSystem: 'geo')上有效。

data[i]

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

通常來說，數(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 可以把其他維度的值展示出來。

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

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對(duì)應(yīng)。
    data: [23,  44,  55,  19]
    // 它其實(shí)是下面這種形式的簡化：
    // 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 開始）或者類目的『字符串值』。例如： 

  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í)，可使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見 這里。

當(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 表示。

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

markPoint

用于標(biāo)注熱力圖。

markLine

熱力圖的標(biāo)線。

markArea

圖表標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

zlevel

熱力圖所有圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的 zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nè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。

silent

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。