建站
咨詢
售后
建站咨詢
新聞中心
series[i]-heatmap
該節(jié)介紹 ECharts 中用于表示熱力圖的系列列表。
熱力圖主要通過顏色去表現(xiàn)數(shù)值的大小，必須要配合 visualMap 組件使用。
可以應用在直角坐標系以及地理坐標系上，這兩個坐標系上的表現(xiàn)形式相差很大，直角坐標系上必須要使用兩個類目軸。
下面分別是直角坐標系和地理坐標系上應用的例子：
直角坐標系：
點擊編輯實例 》》
地理坐標系：
點擊編輯實例 》》
熱力圖屬性
type默認值為 heatmap
name設置該熱力圖系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應的系列。
coordinateSystem該系列使用的坐標系，可選：
- 'cartesian2d'使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex、yAxisIndex 指定相應的坐標軸組件。
- 'geo'使用地理坐標系，通過 geoIndex 指定相應的地理坐標系組件。
xAxisIndex使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
yAxisIndex使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。
geoIndex使用的地理坐標系的 index，在單個圖表實例中存在多個地理坐標系的時候有用。
calendarIndex使用的日歷坐標系的 index，在單個圖表實例中存在多個日歷坐標系的時候有用。
blurSize每個點模糊的大小，默認模糊大小為 20，在地理坐標系(coordinateSystem: 'geo')上有效。
minOpacity最小的透明度，在地理坐標系(coordinateSystem: 'geo')上有效。
maxOpacity最大的透明度，值為1，在地理坐標系(coordinateSystem: 'geo')上有效。
data[i]系列中的數(shù)據(jù)內容數(shù)組。數(shù)組項通常為具體的數(shù)據(jù)項。
通常來說，數(shù)據(jù)用一個二維數(shù)組表示。如下，每一列被稱為一個『維度』。
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]
]
}]- 在 直角坐標系 (grid) 中『維度X』和『維度Y』會默認對應于 xAxis 和 yAxis。
- 在 極坐標系 (polar) 中『維度X』和『維度Y』會默認對應于 radiusAxis 和 angleAxis。
- 后面的其他維度是可選的，可以在別處被使用，例如：在 visualMap 中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上；在 series.symbolSize 中可以使用回調函數(shù)，基于某個維度得到 symbolSize 值；使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來。
特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數(shù)據(jù)可以簡化用一個一維數(shù)組表示。例如：
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 與 xAxis.data 一一對應。
data: [23, 44, 55, 19]
// 它其實是下面這種形式的簡化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]『值』與 軸類型 的關系：
- 當某維度對應于數(shù)值軸（axis.type 為 'value' 或者 'log'）的時候：其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）
- 當某維度對應于類目軸（axis.type 為 'category'）的時候：其值須為類目的『序數(shù)』（從 0 開始）或者類目的『字符串值』。例如：
xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ]}]雙類目軸的示例可以參考 Github Punchcard 示例。
- 當某維度對應于時間軸（type 為 'time'）的時候，值可以為：
- 一個時間戳，如 1484141700832，表示 UTC 時間。
- 或者字符串形式的時間描述：
- ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時區(qū)，否則均表示本地時間，與 moment 一致）：
- 部分年月日時間: '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'.
- 時區(qū)設定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
- 其他的時間字符串，包括（均表示本地時間）: '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 的子集，只包含這些形式（這幾種格式，除非指明時區(qū)，否則均表示本地時間，與 moment 一致）：
- 或者用戶自行初始化的 Date 實例：
- 注意，用戶自行初始化 Date 實例的時候，瀏覽器的行為有差異，不同字符串的表示也不同。
- 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
- 所以，使用 new Date(dataString) 時，可使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見 這里。
當需要對個別數(shù)據(jù)進行個性化定義時：
數(shù)組項可用對象，其中的 value 像表示具體的數(shù)值，如：
[
12,
34,
{
value : 56,
//自定義標簽樣式，僅對該數(shù)據(jù)項有效
label: {},
//自定義特殊 itemStyle，僅對該數(shù)據(jù)項有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]空值：
當某數(shù)據(jù)不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如，無數(shù)據(jù)在折線圖中可表現(xiàn)為該點是斷開的，在其它圖中可表示為圖形不存在。
markPoint用于標注熱力圖。
markLine熱力圖的標線。
markArea圖表標域，常用于標記圖表中某個范圍的數(shù)據(jù)，例如標出某段時間投放了廣告。
zlevel熱力圖所有圖形的 zlevel 值。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的 zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z熱力圖組件的所有圖形的 z 值，默認值為 2?？刂茍D形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
silent圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
當前標題：創(chuàng)新互聯(lián)ECharts教程：ECharts系列列表：熱力圖
文章位置：http://www.dlmjj.cn/article/cddojod.html
