参考：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. 【转】跟我一起写 Makefile

    概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makefi ...

  2. noi.ac #32 快速排序归并排序应用

    \(des\) 给定长度为 \(n\) 的数组,要求翻转一段区间 \([l, r]\) 使其升序排列. 要求 \(\sum r - l + 1 <= 2e7\) \(sol\) 考虑快速排序,每 ...

  3. P4555 【[国家集训队]最长双回文串】

    不知道有没有人跟我一样数据结构学傻了 首先这道题是要求回文串,那么我们可以想到manacher算法 但由于\(manacher\)不能求出双回文子串,我们要考虑一些性质 首先对于一个回文串,删掉两边的 ...

  4. 洛谷P3522 TEM-temperature

    题目 单调队列+阅读理解 简化题意. 找到一个最长的区间使得区间每个点的r要大于该点之前的点的l. 然后可以用单调队列维护单调递减的l.最后尺取法O(n)枚举所有区间并取最大值. 单调队列可以快速找某 ...

  5. Windows系统清除占用的串口号列表批处理

    蛋疼总是无缘无故被占用 @echo off reg query "HKLM\SYSTEM\CurrentControlSet\Control\COM Name Arbiter" / ...

  6. Deepin Create/Delete Folder refresh

    Did u have a problem whth the deepin file manager,Everthime I create/delete a Folder of File i have ...

  7. Hadoop hadoop 之hdfs数据块修复方法

    hadoop 之hdfs数据块修复方法: .手动修复 hdfs fsck / #检查集群的健康状态 hdfs debug recoverLease -path 文件位置 -retries 重试次数 # ...

  8. cross socket tcp客户端开发

    cross socket tcp客户端开发 uses Net.SocketAPI, Net.CrossSocket.Base, Net.CrossSocket FCrossTcp: ICrossSoc ...

  9. MGI数据库挖掘 | MGI-Mouse Genome Informatics | InWeb database

    做生物信息,遗传发育,分析数据的时候总是要narrow down分析范围,高通量数据尤其是基因表达,在庞大的confounder面前,缩小分析范围是必须的,否则你会一直在混沌中游荡. 看一篇文章:20 ...

  10. Tomcat7/8/8.5三种版本的redis-session-manager的jar和xml配置均不同

    chexagon/redis-session-manager: A tomcat8 session manager providing session replication via persiste ...