echarts热力地图
<!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热力地图的更多相关文章
- react项目结合echarts,百度地图实现热力图
一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- echarts的地图点击事件
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...
- echarts中国地图
echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...
- echarts的地图省份颜色自适应变化
在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一 ...
- 几个不错的echarts +百度地图 案例
https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...
- ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
随机推荐
- AL11新建目录、删除目录
AL11可以进入SAP应用服务器中. 项目上需要和外围系统做接口 写文件到文件服务器上,让外围系统过来读取,但是为了减少SAP应用服务器的负担,需要一台独立的文件服务器共享目录到SAP应用服务器, 也 ...
- CSS 使用calc()获取当前可视屏幕高度
来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...
- app欢迎页问题
今天替换app中的图片,打包成apk后,欢迎页的图片怎么替换都还是旧的,尝试多次以后,确定以及肯定是替换成功了的,而且替换的也都对,只好清理了一下项目,重新build,最后再打包,结果成功了!真是坑! ...
- get获取后台数据
let url = $.getCookie('prefixUrl')+'/currencyRatesManage/getCurrency'; let vm=this; $.ajax({ url: ur ...
- 纯净CentOS搭建harbor镜像私仓
物理宿主机IP: 192.168.1.4 在官网下载 CentOS-7-x86_64-DVD-1810 用Hyper-v建立一代虚机,安装时遇分辨率问题无法继续,需要在选择启动界面按TAB键以编辑启 ...
- 使用 jenkins 为 nginx 增加上下文
每次需要在Nginx增加上下文,都需要添加如下两段 server.conf upstream serverdownloadPage { server 10.11.19.6:3023; } ht ...
- Linux下周期性查看GPU状态
Linux下周期性查看GPU状态 NVIDIA自带了nvidia-smi命令来查看GPU的使用情况 了解一下watch命令 $ whatis watch watch (1) - execute a p ...
- Redis06-Redis集群
Redis集群 介绍 1.单机.单实例的持久化方式 在我们之前的课程中,我搭建了一个单机,单进程,缓存redis.我们使用rdb,aof持久化,用来确保数据的安全. rdb(relation-ship ...
- MYSQL获得查询记录的行号
对于获得查询记录的行号这一功能,Oracle 中可以使用标准方法(8i版本以上),也可以使用非标准的ROWNUM,MS SQL Server 则在 2005 版本中提供了ROW_NUMBER()函数. ...
- python zip用法
import requests url = "https://magi.com/search" querystring = {"q":"堕却乡&quo ...