Echarts3实例 map地图加载点数据

前言

Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图scatter、effectScatter，底图依赖于geo。

geo：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
scatter：散点（气泡）图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系，如果数据项有多个维度，其它维度的值可以通过不同大小的 symbol 展现成气泡图，也可以用颜色来表现。这些可以配合 visualMap 组件完成。

effectScatter：带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{height: 100%;}*{margin: 0px;height: 0px;}#map{width: 800px;height: 600px;border: 1px solid red;}</style><script src="js/echarts.min.js"></script><script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="map"></div>
<script>var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息'莱芜市':[117.678856,36.223361],'威海市':[122.121804,37.524054],'滨州市':[117.982412,37.392056],'临沂市':[118.364156,35.119965],'淄博市':[118.069799,36.82475],'日照市':[119.532384,35.425496],'烟台市':[121.454902,37.480081],'菏泽市':[115.48038,35.248354],'青岛市':[120.397057,36.07041],'东营市':[118.681509,37.447084],'潍坊市':[119.164438,36.71744],'济南市':[117.122338,36.661876],'聊城市':[115.986305,36.465225],'泰安市':[117.090143,36.212179],'枣庄市':[117.329308,34.824652],'济宁市':[116.588817,35.433025]};var locValue = [{name:"莱芜市",value:"100"},{name:"威海市",value:"50"},{name:"滨州市",value:"20"},{name:"临沂市",value:"90"},{name:"淄博市",value:"170"},{name:"日照市",value:"190"},{name:"德州市",value:"160"},{name:"烟台市",value:"140"},{name:"菏泽市",value:"130"},{name:"青岛市",value:"110"},{name:"东营市",value:"105"},{name:"潍坊市",value:"142"},{name:"济南市",value:"80"},{name:"聊城市",value:"184"},{name:"泰安市",value:"155"},{name:"枣庄市",value:"130"},{name:"济宁市",value:"140"}];var convertData = function (geoCoordMap,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;};// JSON$.getJSON('./json/shandong.json', function (data) {echarts.registerMap('shandong', data);var chart = echarts.init(document.getElementById('map'));var option = {backgroundColor: '#404a59',title: {text: '点展示',x:'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'item',formatter: function (params) {return params.name + ' : ' + params.value[2];},extraCssText:"height:20px;"},legend: {orient: 'vertical',y: 'bottom',x:'right',data:['pm2.5'],textStyle: {color: '#fff'}},visualMap: {min: 0,max: 200,calculable: true,inRange: {color: ['#50a3ba', '#eac736', '#d94e5d']},textStyle: {color: '#fff'}},geo: {map: 'shandong',roam:true,aspectScale:1,label: {emphasis: {show: true,color:"#fff"}},itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series: [{name: 'pm2.5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(geoCoordMap,locValue).slice(0,4),symbolSize: 12,label: {normal: {show: false},emphasis: {show: false}},itemStyle: {emphasis: {borderColor: '#fff',borderWidth: 1}}},{name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData(geoCoordMap,locValue).slice(4,8),symbolSize: 12,label: {normal: {show: false},emphasis: {show: false}},itemStyle: {emphasis: {borderColor: '#fff',borderWidth: 1}}},{ //没有visualMap的情况，同颜色大小标识不同的等级name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData(geoCoordMap,locValue).slice(8,12),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ddb926'}}},{name: 'pm2.5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(geoCoordMap,locValue).slice(12,18),symbolSize: function (val) {return val[2] / 10;},showEffectOn: 'emphasis',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1},]};chart.setOption(option);});</script>
</body>
</html>

Echarts3实例 map地图加载点数据相关推荐

ECharts3 实现 AJAX异步加载数据库数据
ECharts3的文档里其实对异步加载说的很明白,但是示例都是生成的随机数据,大多数应用是直接读数据库数据然后动态加载到ECharts图表里的,简单的思路就是把需要显示的数据库数据封装成json格式, ...
Echarts3实例 map地图值渲染
前言 Echarts Map中的地图需要按照区域所绑定的值进行渲染,以展示不同区域的属性值. 实现效果实现代码 <!DOCTYPE html> <html lang="e ...
Echarts3实例 map地图选中高亮显示
前言 Echarts Map中实现点击区域高亮,点击事件实现实现效果实现代码 <!DOCTYPE html> <html lang="en"> < ...
使用奥维地图加载星图地球数据云地图数据
星图地球数据云是国内继天地图,谷歌地球之后,星图地球数据云(Datacloud)是国内又一大基础地图数据服务平台本文介绍使用奥维互动地图加载Datacloud地图数据 1.友情提示奥维地图暂不支持 ...
优化 cesium 界面广告牌（billboard）数据量大于 10w ＋时，地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
优化 cesium 界面广告牌(billboard)数据量大于 10w +时,地图加载缓慢.卡顿.加载完成后浏览器严重卡顿甚至崩溃问题前言: 项目之前的设计,billboard 广告牌是绑在 ent ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
中添加2000坐标系_ArcGIS API for JavaScript 4.16在三维场景中以天地图为底图加载2000坐标系的倾斜摄影数据...
2021年目标每日更新一篇公众号文章!!! 需求描述 WebGIS项目中如果有三维需求的话,开发中我们经常会遇到倾斜摄影数据,有了倾斜摄影数据之后,我们可以进行生成真实的三维场景等操作. 本文从前端 ...
奥维互动地图加载地球引擎Google Earth Engine（GEE）1984-2022 地球卫星资源亲测有效，路亚钓鱼露营水下结构水文温湿度地貌变化大数据AI分析神器
Google Earth Engine是一个专门处理卫星图像和其他地球观测数据云端运算平台. 此平台能够存取卫星图像和其他地球观测数据数据库中的资料并提供足够的运算能力来处理这些数据. [1] 平台的 ...
Echarts3实例加载地图
前言 Echarts加载GeoJson数据生成canvas地图,可以实现地图简单的展示,获取GeoJson数据的方法见:https://blog.csdn.net/idomyway/article/d ...

Echarts3实例 map地图加载点数据

前言

实现效果

实现代码

Echarts3实例 map地图加载点数据相关推荐

最新文章

热门文章