HeatMap（热力图）
热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。直角坐标系上必须要使用两个类目轴。
import random
from pyecharts import HeatMap

x_axis = [
    "12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a",
    "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]
y_axis = ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]
data = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]

heatmap = HeatMap()
heatmap.add("热力图直角坐标系", x_axis, y_axis, data,
            is_visualmap=True, visual_text_color="#000", visual_orient="horizontal",
            visual_pos="left", visual_bottom="20%")
heatmap


<div id="f8c7f3083e2f4ea6935340bcecf27797" style="width:800px;height:400px;"></div>


import datetime
import random
from pyecharts import HeatMap

begin, end = datetime.date(2017, 1, 1), datetime.date(2017, 12, 31)
data = [[str(begin + datetime.timedelta(days=i)),
        random.randint(1000, 25000)] for i in range((end - begin).days + 1)]
heatmap = HeatMap("日历热力图示例", "某人 2017 年微信步数情况", width=1000)
heatmap.add("", data,
            is_calendar_heatmap=True,
            is_visualmap=True,
            visual_orient="horizontal", visual_pos="center", visual_top="70%", 
            visual_text_color='#000', visual_range_text=['', ''],
            visual_range=[1000, 25000],
            calendar_cell_size=['auto', 30],
            visual_split_number=3,  # 分段型中分割的段数，在设置为分段型时生效。默认分为 5 段。
            calendar_date_range="2017",
            is_piecewise=True,  # 是否将组件转换为分段型（默认为连续型），默认为 False
           )
heatmap


<div id="89d31bdf784d4b148aa0f697e2b4d22a" style="width:1000px;height:400px;"></div>

热力图

1、利用热力图可以看数据表里多个特征两两的相似度。参考官方API参数及地址：

seaborn.heatmap(data, vmin=None, vmax=None,cmap=None, center=None, robust=False, annot=None, fmt=’.2g’, annot_kws=None,linewidths=0, linecolor=’white’, cbar=True, cbar_kws=None, cbar_ax=None,square=False, xticklabels=’auto’, yticklabels=’auto’, mask=None, ax=None,**kwargs)

（1）热力图输入数据参数:

data:矩阵数据集，可以是numpy的数组（array），也可以是pandas的DataFrame。如果是DataFrame，则df的index/column信息会分别对应到heatmap的columns和rows，即df.index是热力图的行标，df.columns是热力图的列标

（2）热力图矩阵块颜色参数:

vmax,vmin:分别是热力图的颜色取值最大和最小范围，默认是根据data数据表里的取值确定
cmap:从数字到色彩空间的映射，取值是matplotlib包里的colormap名称或颜色对象，或者表示颜色的列表；改参数默认值：根据center参数设定
center:数据表取值有差异时，设置热力图的色彩中心对齐值；通过设置center值，可以调整生成的图像颜色的整体深浅；设置center数据时，如果有数据溢出，则手动设置的vmax、vmin会自动改变
robust:默认取值False；如果是False，且没设定vmin和vmax的值，热力图的颜色映射范围根据具有鲁棒性的分位数设定，而不是用极值设定

（3）热力图矩阵块注释参数:

annot(annotate的缩写):默认取值False；如果是True，在热力图每个方格写入数据；如果是矩阵，在热力图每个方格写入该矩阵对应位置数据
fmt:字符串格式代码，矩阵上标识数字的数据格式，比如保留小数点后几位数字
annot_kws:默认取值False；如果是True，设置热力图矩阵上数字的大小颜色字体，matplotlib包text类下的字体设置；官方文档：

（4）热力图矩阵块之间间隔及间隔线参数：

linewidths:定义热力图里“表示两两特征关系的矩阵小块”之间的间隔大小
linecolor:切分热力图上每个矩阵小块的线的颜色，默认值是’white’

（5）热力图颜色刻度条参数：

cbar:是否在热力图侧边绘制颜色刻度条，默认值是True
cbar_kws:热力图侧边绘制颜色刻度条时，相关字体设置，默认值是None
cbar_ax:热力图侧边绘制颜色刻度条时，刻度条位置设置，默认值是None

（6）square:设置热力图矩阵小块形状，默认值是False

xticklabels, yticklabels:xticklabels控制每列标签名的输出；yticklabels控制每行标签名的输出。默认值是auto。如果是True，则以DataFrame的列名作为标签名。如果是False，则不添加行标签名。如果是列表，则标签名改为列表中给的内容。如果是整数K，则在图上每隔K个标签进行一次标注。 如果是auto，则自动选择标签的标注间距，将标签名不重叠的部分(或全部)输出
mask:控制某个矩阵块是否显示出来。默认值是None。如果是布尔型的DataFrame，则将DataFrame里True的位置用白色覆盖掉
ax:设置作图的坐标轴，一般画多个子图时需要修改不同的子图的该值
**kwargs:All other keyword arguments are passed to ax.pcolormesh

 

热力图矩阵块颜色参数

#cmap(颜色)

import matplotlib.pyplot as plt
import seaborn as sns
% matplotlib inline

f, (ax1,ax2) = plt.subplots(figsize = (6,4),nrows=2)

# cmap用cubehelix map颜色
cmap = sns.cubehelix_palette(start = 1.5, rot = 3, gamma=0.8, as_cmap = True)
pt = df.corr()   # pt为数据框或者是协方差矩阵
sns.heatmap(pt, linewidths = 0.05, ax = ax1, vmax=900, vmin=0, cmap=cmap)
ax1.set_title('cubehelix map')
ax1.set_xlabel('')
ax1.set_xticklabels([]) #设置x轴图例为空值
ax1.set_ylabel('kind')

# cmap用matplotlib colormap
sns.heatmap(pt, linewidths = 0.05, ax = ax2, vmax=900, vmin=0, cmap='rainbow') 
# rainbow为 matplotlib 的colormap名称
ax2.set_title('matplotlib colormap')
ax2.set_xlabel('region')
ax2.set_ylabel('kind')



#center的用法(颜色)

f, (ax1,ax2) = plt.subplots(figsize = (6, 4),nrows=2)

cmap = sns.cubehelix_palette(start = 1.5, rot = 3, gamma=0.8, as_cmap = True)
sns.heatmap(pt, linewidths = 0.05, ax = ax1, cmap=cmap, center=None )
ax1.set_title('center=None')
ax1.set_xlabel('')
ax1.set_xticklabels([]) #设置x轴图例为空值
ax1.set_ylabel('kind')

# 当center设置小于数据的均值时，生成的图片颜色要向0值代表的颜色一段偏移
sns.heatmap(pt, linewidths = 0.05, ax = ax2, cmap=cmap, center=200)   
ax2.set_title('center=3000')
ax2.set_xlabel('region')
ax2.set_ylabel('kind')



#robust的用法(颜色)

f, (ax1,ax2) = plt.subplots(figsize = (6,4),nrows=2)

cmap = sns.cubehelix_palette(start = 1.5, rot = 3, gamma=0.8, as_cmap = True)

sns.heatmap(pt, linewidths = 0.05, ax = ax1, cmap=cmap, center=None, robust=False )
ax1.set_title('robust=False')
ax1.set_xlabel('')
ax1.set_xticklabels([]) #设置x轴图例为空值
ax1.set_ylabel('kind')

sns.heatmap(pt, linewidths = 0.05, ax = ax2, cmap=cmap, center=None, robust=True ) 
ax2.set_title('robust=True')
ax2.set_xlabel('region')
ax2.set_ylabel('kind')



热力图矩阵块注释参数

#annot(矩阵上数字),annot_kws(矩阵上数字的大小颜色字体)matplotlib包text类下的字体设置

import numpy as np
np.random.seed(20180316)
x = np.random.randn(4, 4)

f, (ax1, ax2) = plt.subplots(figsize=(6,6),nrows=2)

sns.heatmap(x, annot=True, ax=ax1)

sns.heatmap(x, annot=True, ax=ax2, annot_kws={'size':9,'weight':'bold', 'color':'blue'})
# Keyword arguments for ax.text when annot is True.  http://stackoverflow.com/questions/35024475/seaborn-heatmap-key-words



#fmt(字符串格式代码，矩阵上标识数字的数据格式，比如保留小数点后几位数字)

import numpy as np
np.random.seed(0)
x = np.random.randn(4,4)

f, (ax1, ax2) = plt.subplots(figsize=(6,6),nrows=2)

sns.heatmap(x, annot=True, ax=ax1)

sns.heatmap(x, annot=True, fmt='.1f', ax=ax2)



热力图矩阵块之间间隔及间隔线参数

#linewidths(矩阵小块的间隔),linecolor(切分热力图矩阵小块的线的颜色)

import matplotlib.pyplot as plt
f, ax = plt.subplots(figsize = (6,4))
cmap = sns.cubehelix_palette(start = 1, rot = 3, gamma=0.8, as_cmap = True)   
sns.heatmap(pt, cmap = cmap, linewidths = 0.05, linecolor= 'red', ax = ax)   
ax.set_title('Amounts per kind and region')
ax.set_xlabel('region')
ax.set_ylabel('kind')



#xticklabels，yticklabels横轴和纵轴的标签名输出

import matplotlib.pyplot as plt
f, (ax1,ax2) = plt.subplots(figsize = (5,5),nrows=2)

cmap = sns.cubehelix_palette(start = 1.5, rot = 3, gamma=0.8, as_cmap = True)

p1 = sns.heatmap(pt, ax=ax1, cmap=cmap, center=None, xticklabels=False)
ax1.set_title('xticklabels=None',fontsize=8)

p2 = sns.heatmap(pt, ax=ax2, cmap=cmap, center=None, xticklabels=2, yticklabels=list(range(5))) 
ax2.set_title('xticklabels=2, yticklabels is a list',fontsize=8)
ax2.set_xlabel('region')



#mask对某些矩阵块的显示进行覆盖

f, (ax1,ax2) = plt.subplots(figsize = (5,5),nrows=2)

cmap = sns.cubehelix_palette(start = 1.5, rot = 3, gamma=0.8, as_cmap = True)

p1 = sns.heatmap(pt, ax=ax1, cmap=cmap, xticklabels=False, mask=None)
ax1.set_title('mask=None')
ax1.set_ylabel('kind')

p2 = sns.heatmap(pt, ax=ax2, cmap=cmap, xticklabels=True, mask=(pt<800))   
#mask对pt进行布尔型转化,结果为True的位置用白色覆盖
ax2.set_title('mask: boolean DataFrame')
ax2.set_xlabel('region')
ax2.set_ylabel('kind')



用mask实现：突出显示某些数据

f,(ax1,ax2) = plt.subplots(figsize=(4,6),nrows=2)
x = np.array([[1,2,3],[2,0,1],[-1,-2,0]])
sns.heatmap(x, annot=True, ax=ax1)
sns.heatmap(x, mask=x < 1, ax=ax2, annot=True, annot_kws={"weight": "bold"})   #把小于1的区域覆盖掉



本文为转载，原地址：https://blog.csdn.net/cymy001/article/details/79576019。点击打开链接

在应用echart实现热力图时 出现了一个疑问，可以使地图和热力图渲染分开进行么  实现一次地图显示 多次不同数据渲染 就不用每次在option加bmap进行地图显示

bmap: {

            center: [120.13066322374, 30.240018034923],

            zoom: 14,

            roam: true

        },

首先在public/index.html里加上 百度地图api

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的key"></script>

定义容器放地图 和热力图渲染

<div ref="map" style="width: 100%;height: 100%"></div>

然后methods里定义函数 创建地图

methods: {
        //创建百度地图
        creatMap(){
            const myChart = echarts.init(this.$refs.map);
            const option = {
                bmap: {
                    center: [120.13066322374, 30.240018034923],
                    zoom: 8,
                    mapStyleV2: {
                        styleId: '50aa27f5dc9a72aff522ccefb0da0e83'
                    },
                    roam: true
                },
            }
            myChart.setOption(option)
        }
}

在mounted里初始化地图

mounted() {
        this.creatMap()
    }

效果：



 再进行热力图渲染

直接使用echart热力图例子 https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap

//渲染热力图
drawHeat(){
            const points = [].concat.apply([], data.map(function (track) {
                return track.map(function (seg) {
                    return seg.coord.concat([1]);
                });
            }));
            const myChart = echarts.getInstanceByDom(this.$refs.map)
            const option = {
                animation: false,
                visualMap: {
                    show: false,
                    top: 'top',
                    min: 0,
                    max: 5,
                    seriesIndex: 0,
                    calculable: true,
                    inRange: {
                        color: ['blue', 'blue', 'green', 'yellow', 'red']
                    }
                },
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'bmap',
                    data: points,
                    pointSize: 5,
                    blurSize: 6,
                    gradientColors: [{
                        offset: 0.4,
                        color: 'green'
                    }, {
                        offset: 0.5,
                        color: 'yellow'
                    }, {
                        offset: 0.8,
                        color: 'orange'
                    }, {
                        offset: 1,
                        color: 'red'
                    }]
                }]
            }
            myChart.setOption(option)
        }

 这里没有加bmap 因为前面creatMap函数已经渲染了地图，里面的data是官方的json数据 我下载到本地同级目录了

json数据地址：https://www.echartsjs.com/examples/data/asset/data/hangzhou-tracks.json

echarts.getInstanceByDom(this.$refs.map)是获取当前echart实例 在该实例上进行热力图操作

添加了点击按钮 点击就渲染热力图 效果如图：



 这样 方便渲染其他数据下的热力图 或者刷新 

其中如果想对地图进行其他操作  百度地图API里的操作 只需获取到该地图实例就可以了

也可以算是echarts里调用百度地图

//获取当前echart实例
const myChart=echarts.getInstanceByDom(this.$refs.map)
// 添加百度地图插件 map为当前地图实例
const map = myChart.getModel().getComponent('bmap').getBMap();

 代码结构：



遇到什么问题，可留言，看到会尽快回复。

1.百度热力图

前提：百度地图的热力图目前只支持有canvas支持的浏览器


 步骤：

1.建立地图图层        var map=new BMap.map('mapconElement') 



/*2.设置地图的中心点和缩放(建议设置 默认的是 lng:0,lat:0)
map.centerAndZoom(p,num)
*/


3.创建热力图（百度的热力图是基于第三方组件Heatmap.js）




var heatmapOverlay=new BMapLib.HeatmapOverlay(opts)





opts参数(非必填)可以是：
{



"radius" : {String} 热力图的半径, 


"visible" : {Number} 热力图是否显示, 


"gradient" : {JSON} 热力图的渐变区间, 


"opacity" : {Number} 热力的透明度



}


也可以通过 heatmapOverlay.setOptions(opts)的方式设置




4.将热力图heatmapOverlay 放在地图map里面




map.addOverlay(heatmapOverlay)




5.设置数据到heatmapOverlay




heatmapOverlay.setDataSet(data)





data参数：
{Json Object} data
{"max" : {Number} 权重的最大值, 
"data" : {Array} 坐标详细数据,格式如下 
{"lng":116.421969,"lat":39.913527,"count":3}, 其中
lng lat分别为经纬度, count权重值


例如:{data:points,max:100}
points=[
{"lng":116.42076,"lat":39.915251,"count":70},
.....
]





也可以添加单个
heatmapOverlay.addDataPoint(lng, lat, count)




6.热力图的一些其他方法



heatmapOverlay.show()  //显示热力图
heatmapOverlay.hide()  //隐藏热力图
heatmapOverlay.toggle() //更改热力图的展现或者关闭



2.高德热力图

前提：百度地图的热力图目前只支持有canvas支持的浏览器

步骤：

1.创建地图图层



var map = new AMap.Map("mapconElement")



2.创建热力图（高德的热力图是基于第三方组件Heatmap.js）



map.plugin(["AMap.Heatmap"],function() {      //加载热力图插件
       heatmap = new AMap.Heatmap({map:map});    //在地图对象叠加热力图
       heatmap.setDataSet({data:points,max:100}); //设置热力图数据集，数据格式和百度的一样
   })