<!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. CSS3--transform相关属性

    ---transform属性使用--- 1.过度时间 :transition: transform 2s; 2.transform: 应用 2D 或 3D 转换.可以对元素进行旋转.缩放.移动或倾斜. ...

  2. call，apply和bind的秒懂区别

    对象.方法(); 谁调用该方法this就指向谁. call()语法: call()精华: 让一个函数成为指定对象的方法进行调用. Person.call(document); //等价于 docume ...

  3. Windows去除开始菜单图标背景

    1.开始菜单图标右键找到目标程序的存储目录. 2.删除目录下的目标程序名+.VisualElementsManifest.xml的文件. 3.开始菜单图标右键找到图标的存储目录,取消开始屏幕固定并删除 ...

  4. centos 7 安装 LNMPC cacti 1.2.7 监控

    先上图,后续更新

  5. kubernetes资源清单之Deployment

    Deployment为Pod和ReplicaSets提供声明性更新 示例 --- apiVersion: apps/v1 kind: Deployment metadata:     name: de ...

  6. java-消息队列相关-activeMQ

    ,1,如何防止activeMQ崩溃导致消息丢失呢? 第一点,首先消息需要使用持久化消息,服务挂掉,重启服务后消息依然可以消费,不会丢失: 第二点,ActiveMQ采用主从模式搭建集群,比如搭建3台主从 ...

  7. Spring boot传值注意事项

    后台debug看到有获取到这个字段的值了,但就是传到前端后,就丢失了这个userId字段,觉得非常奇怪,想不通 后来看到 @JsonIgnore 这个注解就知道原因了 共同学习,共同进步,若有补充,欢 ...

  8. C# class 浅拷贝 与 深拷贝

    MemberwiseClone 方法创建一个浅表副本,具体来说就是创建一个新对象,然后将当前对象的非静态字段复制到该新对象.如果字段是值类型的,则对该字段执行逐位复制.如果字段是引用类型,则复制引用但 ...

  9. 寻找hive视图

    如何hive视图 1.mysql数据库 [centos@s201 ~]$ mysql -uroot -proot mysql> show databases; +---------------- ...

  10. golang web实战之三（基于iris框架的 web小应用,数据库采用 sqlite3 ）

    一.效果:一个图片应用 1.可上传图片到uploads目录. 2.可浏览和评论图片(用富文本编辑器输入) 二.梳理一下相关知识: 1.iris框架(模板输出,session) 2.富文本编辑器.sql ...