创新互联ECharts教程：ECharts系列列表：热力图

series[i]-heatmap

该节介绍 ECharts 中用于表示热力图的系列列表。

热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。

可以应用在直角坐标系以及地理坐标系上，这两个坐标系上的表现形式相差很大，直角坐标系上必须要使用两个类目轴。

下面分别是直角坐标系和地理坐标系上应用的例子：

直角坐标系：

点击编辑实例 》》

地理坐标系：

点击编辑实例 》》

热力图属性

type

默认值为 heatmap

name

设置该热力图系列名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

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]

系列中的数据内容数组。数组项通常为具体的数据项。

通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。

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 中可以使用回调函数，基于某个维度得到 symbolSize 值；使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他维度的值展示出来。

特别地，当只有一个轴为类目轴（axis.type 为 'category'）的时候，数据可以简化用一个一维数组表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 与 xAxis.data 一一对应。
    data: [23,  44,  55,  19]
    // 它其实是下面这种形式的简化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

『值』与 轴类型 的关系：

• 当某维度对应于数值轴（axis.type 为 'value' 或者 'log'）的时候：其值可以为 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）
• 当某维度对应于类目轴（axis.type 为 'category'）的时候：其值须为类目的『序数』（从 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 的子集，只包含这些形式（这几种格式，除非指明时区，否则均表示本地时间，与 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'.
      • 时区设定: '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'
  • 或者用户自行初始化的 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，或者参见 这里。

当需要对个别数据进行个性化定义时：

数组项可用对象，其中的 value 像表示具体的数值，如：

[
    12,
    34,
    {
        value : 56,
        //自定义标签样式，仅对该数据项有效
        label: {},
        //自定义特殊 itemStyle，仅对该数据项有效
        itemStyle:{}
    },
    10
]
// 或
[
    [12, 33],
    [34, 313],
    {
        value: [56, 44],
        label: {},
        itemStyle:{}
    },
    [10, 33]
]

空值：

当某数据不存在时（ps：不存在不代表值为 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

例如，无数据在折线图中可表现为该点是断开的，在其它图中可表示为图形不存在。

markPoint

用于标注热力图。

markLine

热力图的标线。

markArea

图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。

zlevel

热力图所有图形的 zlevel 值。

zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z

热力图组件的所有图形的 z 值，默认值为 2。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。

z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

silent

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

网站题目：创新互联ECharts教程：ECharts系列列表：热力图
当前URL：http://www.turtgq.com/article/cddojod.html