赞
踩
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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。