用echart玩点好玩的--酷炫热力图

先bb两句

首先承认酷炫是标题党，哈哈哈，参考了echart的官网开发示例，对一些样式做了自己的改动，变得稍微极客一点，另外在html中使用了ajax获取现成json数据，如果你有接口的话可以直接请求接口！

上效果图

其中气泡的大小和颜色都是根据各省不同的人数来展示，颜色还可以你自己调整成你认为好看的，波纹是动态的辐射，感觉做的很low，直接用的官方文档调整的，应该有更帅的。

代码

地址：https://github.com/lightTrace/echart/tree/master/hotMap

代码所依赖的全部官方文件都有的，可以在idea直接open in browser选择浏览器直接打开hotmap.html即可看到效果，直接打开是不行的，因为加入了ajax调用，或者部署到nginx上面也行。

走过路过的点个赞呗

hotmap.html简单说说

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EDGE"><title>ECharts</title><link rel="stylesheet" type="text/css"/><script src="gf-js/jquery.min.js"></script><script src="gf-js/echarts.js"></script><script src="gf-js/china.js"></script><style>#china-map {width:100%; height: 100%;margin: auto;}</style>
</head>
<body><div id="china-map"></div><script>var province = "河北省、山西省、辽宁省、吉林省、黑龙江省、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、海南省、四川省、贵州省、云南省 、陕西省 、甘肃省、青海省、台湾省、西藏自治区、广西壮族自治区、内蒙古自治区、宁夏回族自治区、新疆维吾尔自治区、北京市、上海市、天津市、重庆市、香港、澳门"var ajaxReqs = null;function reqs() {if(ajaxReqs !== null) {ajaxReqs.abort();ajaxReqs = null;}var data=[]var geoCoordMap={}var max = 0,min = 1000; // min,max为了自动计算出人数最多的省和最小的省从而自动分配颜色var maxSize4Pin = 55,minSize4Pin = 35;$.ajax({type : "GET",// url : "http://192.168.2.184:9001/collect/region",url:"./data.json",async: false,dataType : "json",cache:false,success : function (datas) {list = datas.data.list$.each(list, function (i, item) {if(province.indexOf(item.region)!=-1){if(max < item.activityNumber){max = item.activityNumber}if(min > item.activityNumber){min = item.activityNumber}data.push({name: item.region,value: item.activityNumber})var point = []point.push(item.lng, item.lat)geoCoordMap[item.region]=point}});}});console.log(min)console.log(max)$('#china-map').width($('#china-map').width());$('#china-map').height($('#china-map').width());var myChart = echarts.init(document.getElementById('china-map'));var name_title = ''var subname = ''var nameColor = '#2880fc'var name_fontFamily = '宋体'var subname_fontSize = 15var name_fontSize = 25var mapName = 'china'/*获取地图数据*/myChart.showLoading();var mapFeatures = echarts.getMap(mapName).geoJson.features;myChart.hideLoading();var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};option = {backgroundColor: 'rgba(29, 52, 108, 1)',title: {text: name_title,subtext: subname,x: 'left',y:'200px',textStyle: {color: nameColor,fontFamily: name_fontFamily,fontSize: name_fontSize},subtextStyle:{fontSize:subname_fontSize,fontFamily:name_fontFamily}},visualMap: {show: false,min: min,max: max,left: 'left',top: 'bottom',color: '#b70d05',text: ['高', '低'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {color: ['#00467F', '#A5CC82','#c3fc0a','#fca80d', '#cc0529'] // 地图不同省份填充的颜色}},geo: {show: true,map: mapName,label: {normal: {show: false},emphasis: {show: false,}},roam: true,  //地图是否可以缩放itemStyle: {normal: {areaColor: '#031525',borderColor: '#00effc',},emphasis: {areaColor: '#2B91B7',}},regions: [{name: '南海诸岛',value: 0,itemStyle: {normal: {opacity: 0,label: {show: false}}}}]},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {return 1;},label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#05C3F9'}}},{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: true, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'effectScatter',coordinateSystem: 'geo',symbol: 'pin', //气泡effectType: 'ripple',animation: true,rippleEffect: {period: 5,scale: 1.5,brushType: 'stroke'},symbolSize: function(val) {var a = (maxSize4Pin - minSize4Pin) / (max - min);var b = minSize4Pin - a * min;b = maxSize4Pin - a * max;return a * val[2] + b;},label: {normal: {show: true,formatter:'{@[2]}',  //这里加这个是防止echart地图加载数据加载气泡的数值加载成纬度，这个bug很尴尬textStyle: {color: '#fff',fontSize: 9,}}},itemStyle: {normal: {color: '#F62157', //标志颜色}},zlevel: 6,data: convertData(data),},]};myChart.setOption(option);}reqs();setInterval(reqs, 3000);
</script></body>
</html>

发现没什么好说的，代码很简单，注释也有，主要我写的菜，请大家谅解，起码提供了官方下载文件，哈哈哈，后面学习下可能会做一点更酷的。

用echart玩点好玩的--酷炫热力图相关推荐

python3+pygame制作的连连看小游戏，好玩，酷炫，
使用Python3+pygame模块制作的连连看小游戏,好玩,酷炫,很适合初学Python的同学练习连连看源码下载: 长按左侧二维码 2 秒回复「连连看」即可获取源码 (非本号) 一.运行效果二 ...
可视化案例（五）Kepler.gl绘制动态酷炫热力图
目录一.Kepler.gl简介二.案例演示 2.1 数据介绍 2.2 基本设置三.Jupyter Notebook中实现 3.1 安装kepler模块 3.2 基本用法一.Kepler.gl简 ...
酷炫！可视化神器Plotly玩转饼图
酷炫!可视化神器Plotly玩转饼图之前发表过两篇关于Plotly的文章: 入门篇:酷炫!36张图爱上高级可视化神器Plotly_Express 散点图:酷炫!可视化神器Plotly玩转散点图 Pl ...
乐高凯德机器人_酷炫到底！乐高EV3机器人+冰淇淋的高级玩法，你GET到了吗？...
原标题:酷炫到底!乐高EV3机器人+冰淇淋的高级玩法,你GET到了吗? 你喜欢吃冰淇淋吗? 甜甜凉凉的冰淇淋圣代, 最适合炎热的夏天啦~ 我们"多才多艺"的EV3机器人, 也会做冰 ...
惊艳！人人都能玩转酷炫的数据可视化，高德LOCA 2.0全新升级，轻松实现海量数据渲染...
引言 "一图胜千言",大数据时代来临,数据与人们生活密切相关.复杂难懂且体量庞大的数据给人的感觉总是冷冰冰的,让人难以获取到重点信息,也找不出规律和特征,数据价值发挥不出来.空间数 ...
微宝球型机器人功能_微宝球型机器人即将开售酷炫玩法升级
原标题:微宝球型机器人即将开售酷炫玩法升级 [机锋资讯]日前一款由美国Orbotics公司研发的Sphero 2.0--微宝智能球型机器人出现了消费者眼前,这个外观看起棒球的智能小球不仅可以在地上旋 ...
python 词云 fontpath_Python酷炫词云图原来可以这么玩？
作者:费弗里博客地址: https://www.cnblogs.com/feffery/p/11842798.html 说明:本文经作者授权转载,禁止二次转载本文对应脚本及数据已上传至我的Gith ...
【UI学习】Android github开源项目，酷炫自定义控件(View)汇总
[UI学习]Android github开源项目,酷炫自定义控件(View)汇总转载 2016年09月04日 23:23:15 3484 近期整理的比较酷炫并且我们会经常用到的custom vie ...
微信／微博的图片处理?－android酷炫图片处理(下)
微信一向是Android开发者们模仿的对象,上篇文章中,我介绍了一个和微信图片压缩,压缩效果差不多的库Luban,这篇文章还会介绍高仿微信从文件系统选择图片.此外微博加载超长大图功能也很酷炫(其实微信 ...