<!DOCTYPE HTML>

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <title>日志分析</title>

    <div th:replace="head"></div>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta charset="utf-8">

    <meta name="keywords"

          content="Classic Weather Widget Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design">

</head>

<body>

<!--为ECharts准备一个具备大小（宽高）的Dom-->

<div id="main" style="width: 1000px;height:600px;margin-left: 20px"></div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    var geoCoordMap = {};
　　//后台返回的数据

    var infoData = [];

    var option = {};

    $(function () {

        $.ajax({

            type: 'GET',

            url: 'admin/cityInfo',

            dataType: 'JSON',

            success: function (res) {

                if(res.code !="000"){

                    return;

                }

                geoCoordMap = res.data.cityInfo;

                infoData = res.data.cityLog;

                // 指定图表的配置项和数据

                option = {

                    title: {

                        text: '主要访问城市',

                        subtext: '',

                        //sublink: 'http://www.pm25.in',

                        left: 'center',

                        textStyle: {

                            color: '#fff'

                        }

                    },

                    backgroundColor: '#404a59',

                    visualMap: {

                        min: 0,

                        max: 1000,

                        splitNumber: 5,

                        inRange: {

                            color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()

                        },

                        textStyle: {

                            color: '#fff'

                        }

                    },

                    geo: {

                        map: 'china',

                        label: {

                            emphasis: {

                                show: false

                            }

                        },

                        roam: true,

                        itemStyle: {

                            normal: {

                                areaColor: '#323c48',

                                borderColor: '#111'

                            },

                            emphasis: {

                                areaColor: '#2a333d'

                            }

                        }

                    },

                    series: [{

                        name: 'AQI',

                        type: 'heatmap',

                        coordinateSystem: 'geo',

                        data:convertData(infoData)

                    }]

                };

                // 使用刚指定的配置项和数据显示图表。

                myChart.setOption(option);

            }

        });

    })

    var convertData = function (data) {

        var res = [];

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

            var geoCoord = geoCoordMap[data[i].name];

            if (geoCoord) {

                res.push(geoCoord.concat(data[i].value));

            }

        }

        return res;

    };

</script>

</body>

</html>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>

<script src="https://cdn.bootcss.com/heatmap.js/2.0.2/heatmap.min.js"></script>

<script th:src="@{/js/china.js}"></script>

china.js文件

链接：https://pan.baidu.com/s/1ibRWTvWPc-MyASCmUvBlhw
提取码：su7j

city经纬度 sql

链接：https://pan.baidu.com/s/1sez_HKyDYIJeAaqzzBgpgw
提取码：g7tk

city经纬度 json

链接：https://pan.baidu.com/s/1l_sjybO7-Vv1F7aXQAjo-g
提取码：x26p
参考：  https://blog.csdn.net/gongchengshiv/article/details/77775020

echarts热力地图的更多相关文章

  1. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  2. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  3. echarts的地图点击事件

    1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...

  4. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  5. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  6. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  7. echarts的地图省份颜色自适应变化

    在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一 ...

  8. 几个不错的echarts +百度地图 案例

    https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...

  9. ECharts 实现地图散点图上（转载）

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上)  小红  2016-04-28  ECharts, 教 ...

随机推荐

  1. swagger2 Could not resolve pointer: /definitions

    错误信息: Errors Resolver error at paths././query.post.parameters.20.schema.$ref Could not resolve refer ...

  2. Caffe测试单独的算子

    最近有一个需求是测试单独算子在CPU.Caffe使用的GPU.cuDNN上的性能,一个是使用caffe的time问题,还有一个是使用单独的test功能. time选项的使用,大家都比较熟悉,单独的te ...

  3. shell运行下的写日志

    tee 重定向输出到多个文件   在执行Linux命令时,我们既想把输出保存到文件中,又想在屏幕上看到输出内容,就可以使用tee命令 要注意的是:在使用管道线时,前一个命令的标准错误输出不会被tee读 ...

  4. 第十章、hashlib模块和hmac模块

    目录 第十章.hashlib模块和hmac模块 一.hashlib模块 二.hash模块 第十章.hashlib模块和hmac模块 一.hashlib模块 hash是一种算法,接收传入的内容,经过运算 ...

  5. Win7系统开机速度慢怎么解决？

    Win7系统使用时间长了,我们就会发现电脑的开机启动速度变慢了,其实除了关闭相应的启动项之外,我们还可以对电脑进行相关的系统配置,来使电脑能够更加快速的启动.下面好系统重装助手就来告诉你怎么解决Win ...

  6. linux 进程优先级 调度 nice pri

    转:http://www.linuxidc.com/Linux/2016-05/131244.htm 深入 Linux 的进程优先级 [日期:2016-05-11] 来源:liwei.life  作者 ...

  7. 【wifi移植 1】 ap6210 wifi模块移植

    1. 编译wifi相关功能为模块,生成bcmdhd.ko:由bcmdhd.ko的模块信息可知,该模块依赖于cfg80211.ko和rfkill.ko. 2. 写脚本,开机自动加载wifi模块. 3. ...

  8. Linux中/etc/inittab文件

    1. inittab基本概念 a) init进程: Linux在完成核内引导(内核镜像已被载入内存,开始运行,并已初始化所有的设备驱动程序和数据结构等)之后,接着通过启动一个用户级程序init来启动其 ...

  9. 基础数据 补充 set() 集合 深浅拷贝

    一  对字符串的操作 li = ["张曼玉", "朱茵", "关之琳", "刘嘉玲"] s = "_" ...

  10. Linux计划任务与压缩归档

    计划任务分为两种形式 第一种:定时性的:也就是例行,每隔一定的周期就要重复来做这个任务. 第二种:突发性的:临时决定,只执行一次的任务. 用到的命令有两个 at:它是一个可以处理仅执行一次的任务就结束 ...