建站
咨詢
售后
建站咨詢
新聞中心
series[i]-heatmap
該節(jié)介紹 ECharts 中用于表示熱力圖的系列列表。
熱力圖主要通過顏色去表現(xiàn)數(shù)值的大小，必須要配合 visualMap 組件使用。
可以應用在直角坐標系以及地理坐標系上，這兩個坐標系上的表現(xiàn)形式相差很大，直角坐標系上必須要使用兩個類目軸。
下面分別是直角坐標系和地理坐標系上應用的例子：
直角坐標系：
點擊編輯實例 》》
地理坐標系：
點擊編輯實例 》》
熱力圖屬性
type默認值為 heatmap
name設置該熱力圖系列名稱，用于 tooltip 的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據和配置項時用于指定對應的系列。
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ù)據內容數(shù)組。數(shù)組項通常為具體的數(shù)據項。
通常來說，數(shù)據用一個二維數(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ù)據可以簡化用一個一維數(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ù)據進行個性化定義時：
數(shù)組項可用對象，其中的 value 像表示具體的數(shù)值，如：
[
12,
34,
{
value : 56,
//自定義標簽樣式，僅對該數(shù)據項有效
label: {},
//自定義特殊 itemStyle，僅對該數(shù)據項有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]空值：
當某數(shù)據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如，無數(shù)據在折線圖中可表現(xiàn)為該點是斷開的，在其它圖中可表示為圖形不存在。
markPoint用于標注熱力圖。
markLine熱力圖的標線。
markArea圖表標域，常用于標記圖表中某個范圍的數(shù)據，例如標出某段時間投放了廣告。
zlevel熱力圖所有圖形的 zlevel 值。
zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的 zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
z熱力圖組件的所有圖形的 z 值，默認值為 2。控制圖形的前后順序。z 值小的圖形會被 z 值大的圖形覆蓋。
z 相比 zlevel 優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
silent圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。
網站名稱：創(chuàng)新互聯(lián)ECharts教程：ECharts系列列表：熱力圖
分享URL：http://www.5511xx.com/article/cddojod.html
