参考：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. EasyUI日期时间框DateTimeBox

    WEB DEMO 日期时间框 DateTimeBox <!DOCTYPE html> <html> <HTML> <head> <HEAD> ...

  2. [内网渗透]Mimikatz使用大全

    0x00 简介 Mimikatz 是一款功能强大的轻量级调试神器,通过它你可以提升进程权限注入进程读取进程内存,当然他最大的亮点就是他可以直接从 lsass.exe 进程中获取当前登录系统用户名的密码 ...

  3. iframe中用到的例子

    <view:qrytr>         <view:qrytd colspan="4">     <iframe id="ccbl&quo ...

  4. (大型网站之Nginx)图解正向代理、反向代理、透明代理

    一.正向代理(Forward Proxy) 一般情况下,如果没有特别说明,代理技术默认说的是正向代理技术.关于正向代理的概念如下: 正向代理(forward)是一个位于客户端[用户A]和原始服务器(o ...

  5. mac编译Cpython

    源代码中有什么? CPython 源代码分发包含各种工具,库和组件.我们将在本文中探讨这些内容. 首先,我们将重点关注编译器.先从 git 上下载 Cpython 源代码. git clone htt ...

  6. strace命令 一

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  7. Java从指定URL下载文件并保存到指定目录

    1.基本流程 当我们想要下载网站上的某个资源时,我们会获取一个url,它是服务器定位资源的一个描述,下载的过程有如下几步: (1)客户端发起一个url请求,获取连接对象. (2)服务器解析url,并且 ...

  8. org.apache.jasper.JasperException: The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed with this application

    编程中遇到:org.apache.jasper.JasperException: The absolute uri: http://java.sun.com/jsp/jstl/core cannot ...

  9. Mysql修改数据文件默认目录datadir

    1.停止服务 service mysql stop service mysqld stopmysqladmin -uroot shutdown -p 2.创建目录 cd /data mkdir mys ...

  10. 获取div下的input type为file的所有对象

    var files = $(".profile-content").find("input[type='file']"); files.each(functio ...