<!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. LintCode 547---两数组的交集

    public class Solution { /** * 给出两个数组,写出一个方法求出它们的交集 * @param nums1: an integer array * @param nums2: ...

  2. webpack 学习过程

    什么是WebPack,为什么要使用它? 为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现 ...

  3. OGG学习笔记03

    OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象故障现象:启动OGG源端的extract进程,da ...

  4. 以tomcat镜像为基础部署war包后再做成镜像

    #以交互的方式启动本地的镜像tomcat:hps,并且将本地目录/mnt/iso挂在到容器中的/tmp/repositories目录,方便从本地获取一些安装文件并进行一些操作 docker run - ...

  5. 04-【servlet转发和重定向】

    转发: //forward(将 数据传给下一个资源(servlet,jsp ,html等 ,把请求和响应的数据和参数设置带过去 ) request.getRequestDispatcher(" ...

  6. deep_learning_MNIST数据集

    Code_link:https://pan.baidu.com/s/1dshQt57196fhh67F8nqWow 本文是为既没有机器学习基础也没了解过TensorFlow的码农.序媛们准备的.如果已 ...

  7. 十，StatefulSet简介及简单使用

    目录 StatefulSet简介 为什么要用statefulset控制器 简单测试 使用 StatefulSet 创建基础的PV StatefulSet 清单 statefulset管理pod的启停顺 ...

  8. zabbix 监控TCP状态连接数

    1.zabbix客户端,监控TCP状态脚本,并保存到的定路径.(/usr/local/zabbix-agent/shells) # cat zabbix_linux_plugin.sh #!/bin/ ...

  9. Percona MongoDB 4 搭建副本集

    什么是副本集: 是一组维护相同数据集的mongod进程 提供冗余,自动故障转移和高可用性 提供读取可伸缩性 内部概念或多或少与MySQL的概念相似 PRIMARY概念与MySQL复制中的MASTER大 ...

  10. VMware提示此主机支持Intel VT-x,但Intel VT-x处于禁用状态怎么解决

    本文链接:https://blog.csdn.net/weixin_40816738/article/details/90146770 ThinkPad笔记本1.开机按F1或Fn+F1进入BIOS,切 ...