在react项目中的热力图实现

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

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

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

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

话不多说，就走几步

1. 命令行安装依赖

npm install heatmap.js

2. 引用

import Heatmap from 'heatmap.js';

3. 实例

定义个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

})；

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

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