参考：https://www.cnblogs.com/julinhuitianxia/p/7755246.html

1.首先到echarts官网下载应用实例：http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap

2.在A页面中用iframe标签进行跳转（使用该方法的原因：如果你的主页面有应用到其他版本的echarts或jQuery话可能会因为echarts或jQuery版本问题一直报错，如果单纯仅仅使用热力图的话可以直接使用）

3.heatmap-bmap.html页面

<!DOCTYPE html>

<html style="height: 100%">

   <head>

       <meta charset="utf-8">

   </head>

   <body style="height: 100%; margin: 0">

       <div id="container" style="height: 100%"></div>

      <!--引用jQuery-->

      <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

       <script type="text/javascript" src="../../../script/plugin/jquery/jquery.cookie.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>

       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

       <script type="text/javascript">

           var dom = document.getElementById("container");

            var myChart = echarts.init(dom);

            var app = {};

            option = null;

            var lon ='';

            var lat ='';

            app.title = '热力图与百度地图扩展';

            $.ajax({

                type: 'POST',

                url: '../../../baseinfo/demoCounty/queryHotMapData.do',

                data: {'county':$.cookie('defaultCounty')},

                cache: false,

                success: function (da) {

                    var arr = da.opInfo.hotMapData;

                    var data =[];

                    lon=arr[0].LON;

                    lat=arr[0].LAT;

                    for(var i=0;i<arr.length;i++){

                        var coord=[]

                        coord.push(arr[i].LON);coord.push(arr[i].LAT);coord.push(1) ;

                        data.push(coord)

                    }

                    myChart.setOption(option = {

                        animation: false,

                        bmap: {

                            center: [lon, lat],

                            zoom: 10,   //地图比例尺，调节地图初始化时候的大小

                            roam: true

                        },

                        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: data,

                            pointSize: 5,

                            blurSize: 6

                        }]

                    });

                    if (!app.inNode) {

                        // 添加百度地图插件

                        var bmap = myChart.getModel().getComponent('bmap').getBMap();

                        bmap.addControl(new BMap.MapTypeControl());

                    }

                },

                dataType: "json",

                error: function (er) {

                }

            });

            if (option && typeof option === "object") {

                myChart.setOption(option, true);

            }

       </script>

   </body>

</html>

热力图heatmap使用的更多相关文章

  1. 网页热力图 heatmap js

    HBuilder +js 实现网页热力图 废话不多说,上代码 <!DOCTYPE html> <html> <head> <title>111</ ...

  2. 热力图heatmap.js使用中的思路解析

    官网: https://www.patrick-wied.at/static/heatmapjs/ 需求:使用heatmap.js制作热力图,反映人群分布情况 问题:热力图需要的数据:坐标 + 人数 ...

  3. seaborn---画热力图

    1.引用形式: seaborn.heatmap(data, vmin=None, vmax=None, cmap=None, center=None, robust=False, annot=None ...

  4. 基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统（2）-查询实现

    在上一篇博客中,我们准备好了数据.现在数据已经以我们需要的格式,存放在Elasticsearch中了. 本文讲述如何在Elasticsearch中进行空间GEO查询和聚合查询,以及如何准备ajax接口 ...

  5. R语言学习笔记︱Echarts与R的可视化包——地区地图

    笔者寄语:感谢CDA DSC训练营周末上完课,常老师.曾柯老师加了小课,讲了echart与R结合的函数包recharts的一些基本用法.通过对比谢益辉老师GitHub的说明文档,曾柯老师极大地简化了一 ...

  6. Python绘图与可视化

    Python有很多可视化工具,本篇只介绍Matplotlib. Matplotlib是一种2D的绘图库,它可以支持硬拷贝和跨系统的交互,它可以在Python脚本.IPython的交互环境下.Web应用 ...

  7. .net图表之ECharts随笔05-不同01的语法步骤

    找了好久,一直没找到可用的热力图heatmap.js. 应该说,使用01中的语法一直都无法实现热力图.只能说我太菜了... 现在急于求成,我找了另一种语法来调用ECharts.此种语法的js文件集是从 ...

  8. 5-7 可视化库Seaborn-热度图绘制

    In [1]: %matplotlib inline import numpy as np import matplotlib.pyplot as plt import seaborn as sns ...

  9. python绘图 转

    Python有很多可视化工具,本篇只介绍Matplotlib. Matplotlib是一种2D的绘图库,它可以支持硬拷贝和跨系统的交互,它可以在Python脚本.IPython的交互环境下.Web应用 ...

随机推荐

  1. 布局 Bootstrap Table的 文本内容 垂直居中

    原文:https://blog.csdn.net/peng_hong_fu/article/details/70662979 样式(注意样式优先级): #div-component-info .tab ...

  2. PHP安装之configure的配置参数

    1.生成环境安装配置如下 要求安装如下库: imagickgdmysqlmysqlimysqlndphalconPharsoapsocketsxwebxsvczipzlib 具体查看 vim php- ...

  3. BurpSuite经常拦截firefox报文如success.txt的解决办法

    因为工作需要经常使用Burp对收发报文进行检测,平时习惯使用火狐浏览器,但是火狐浏览器经常进行一些登录状态的检测,导致Burp拦截中出现大量的火狐报文,如http://detectportal.fir ...

  4. 【CSP模拟赛】避难向导（倍增lca&树的直径）

    耐力OIer,一天7篇博客 题目描述 “特大新闻,特大新闻!全国爆发了一种极其可怕的病毒,已经开始在各个城市 中传播开来!全国陷入了巨大的危机!大量居民陷入恐慌,想要逃到其它城市以 避难!经调查显示, ...

  5. Linux系统配置静态ip

    一.工具/原料 redhat6.2 二.步骤 1."网络适配器"选择"桥接模式" 右键虚拟机,选择"设置"->"网络适配器& ...

  6. intellij idea tomcat 启动不生成war包

    intellij idea tomcat 启动不生成war包 想把项目打包成war包做测试,但是按照之前的方法居然没有成功导出war包,犯了很低级的错误,特此记录. (1)首先在Project Str ...

  7. Spark（四十七）：Spark UI 数据可视化

    导入: 1)Spark Web UI主要依赖于流行的Servlet容器Jetty实现: 2)Spark Web UI(Spark2.3之前)是展示运行状况.资源状态和监控指标的前端,而这些数据都是由度 ...

  8. HTMLPage测试js通过ajax调用

    HTMLPage测试js通过ajax调用接口 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3. ...

  9. 查看mysql事务的隔离级别

    1.选择数据库,查看当前事务隔离界别 select @@tx_isolation; 2.开启事务,回滚事务 3.事务级别中脏读,幻读 4.MySQL事务autocommit设置,每次sql必须用com ...

  10. 关于postman与shiro权限验证问题

    作为一个java的开发小白 , 写完一个web方法测试是必不可少的 , 只有测试号没问题的方法给别人时 ,别人才不知道你是小白 , 要不然很尴尬的 .新手入坑的测试工具是postman .这个工具用起 ...