参考：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. yum和apt-get 软件包管理器的用法及区别

    yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 一般来说著名的linux系统基本上分两大类: 1.R ...

  2. 【概率论】5-9:多项式分布(The Multinomial Distributions)

    title: [概率论]5-9:多项式分布(The Multinomial Distributions) categories: - Mathematic - Probability keywords ...

  3. 【一起来烧脑】一步学会TypeScript入门

    [外链图片转存失败(img-rmJXMGFs-1563388353181)(https://upload-images.jianshu.io/upload_images/11158618-dd813e ...

  4. Transform详解(超详细) Attention is all you need论文

    一.背景 自从Attention机制在提出 之后,加入Attention的Seq2 Seq模型在各个任务上都有了提升,所以现在的seq2seq模型指的都是结合rnn和attention的模型.传统的基 ...

  5. os 模块常用方法

    os.remove()删除文件 os.rename()重命名文件 os.walk()生成目录树下的所有文件名 os.chdir()改变目录 os.mkdir/makedirs创建目录/多层目录 os. ...

  6. Quartz.NET浅谈一 ： 简单Job使用（定时发送QQ邮件）

    Quartz.NET是一个全功能的开源作业调度系统,可用于从最小的应用程序到大型企业系统. 直接上代码吧... 一.新建一个控制台项目 略过 二.安装Nuget包 三.创建发送邮箱辅助工具类 stat ...

  7. cross socket tcp客户端开发

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

  8. Understanding Action Filters (C#) 可以用来做权限检查

    比如需要操作某一张表league的数据,multi-tenancy的模式,每一行数据都有一个租户id的字段. 那么在api调用操作的时候,我们需要检查league的id,是否和当前用户所属的租户信息一 ...

  9. PluginWindowlessWin

    实际绘图发生在我的本机代码中的屏幕外目标上,每次刷新都会调用myplugin :: onWindowRefresh,它会将StretchBlt调用到插件的无窗口窗口,代码如下, FB::PluginW ...

  10. 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 ...