参考：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. 正确使用Java读写锁

    JDK8中引入了高性能的读写锁StampedLock,它的核心思想在于,在读的时候如果发生了写,应该通过重试的方式来获取新的值,而不应该阻塞写操作.这种模式也就是典型的无锁编程思想,和CAS自旋的思想 ...

  2. IIS7 伪静态 web.config 配置方法【详解】

    IIS7 做伪静态比较的简单方便 1.程序方面 只需要设置web.config 就可以了. 2.服务器需要安装:URL Rewrite 下载地址:http://www.iis.net/download ...

  3. ICEM-带把圆环

    原视频下载地址:https://pan.baidu.com/s/1pKSXyR5 密码: dynm

  4. 14.LAMP服务 Linux Apache Mysql Php和防护机制 xinetd、tcp wapper

    一.安装LAMP服务 Linux Apache Mysql Php       要求操作系统支持 php解析 apache调用php插件解析 phpmyadmin       yum install ...

  5. 《sicp》模块化程序设计 笔记

    <sicp>模块化程序设计 2.2.3 序列作为一种约定界面 学习笔记 这节中,讲述了一种模块化的程序设计思想,也就是将程序设计为如同信号处理过程一样,采用级联的方式将程序各个部分组合在一 ...

  6. JVM 启动类加载器2

    在运行期,一个Java类是由该类的完全限定名(binary name,二进制名)和用于加载该类的定义类加载器(defining loading)所共同决定的.如果同样名字(即相同的完全限定名)的类由两 ...

  7. Oracle中的统计信息

    一.什么是统计信息 统计信息主要是描述数据库中表,索引的大小,规模,数据分布状况等的一类信息.例如,表的行数,块数,平均每行的大小,索引的leaf blocks,索引字段的行数,不同值的大小等,都属于 ...

  8. nrm -- 一键切换npm源

    0. 背景 先描述一下没有nrm时我们是怎样使用npm源的 查看npm源地址,终端中输入 npm config list 可以看到npm源 metrics-registry = "https ...

  9. post请求头中常见content-type（非常重要）

    定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码.默认地,表单数据会编码为 "application/x-www-form-urlencoded". ...

  10. Socket通信(1)：搭建开发环境

    一. 准备工具 1. mac环境下的VMware Fusion, 下载地址:https://www.newasp.net/soft/462096.html 2. ubuntu 14.04 LTS, 不 ...