在react项目中的热力图实现

ECharts 3.0版本没有找到类似2.0版本自定义背景的热力图示例

尝试了很久，配置项过于麻烦，遂放弃

于是转 heatmap.js，瞬间人生巅峰好嘛！！！

何苦纠结于ECharts哇！！！！！

话不多说，就走几步

1. 命令行安装依赖

npm install heatmap.js

2. 引用

import Heatmap from 'heatmap.js';

3. 实例

定义个div

<div id="hotMap" style={{ width: 1200, height: 300 }}></div>

let map = Heatmap .create({

container: document.getElementById('hotMap'),

radius: 80,

maxOpacity: .9,

minOpacity: 0,

blur: 1,

gradient: {

'.1': '#32A933',

'.2': '#3ACB49',

'.4': '#94E149',

'.82': '#CDDE40',

'1': '#ED6B44'

}

});

let data = [{ x: 10, y: 10, value : 40 }];

map.setData({

max: 50,

data

})；

实例是我自己配置的，效果如图

情况就是这么个情况，告辞