echarts map+散点图按条件查询并动态显示结果

2018-08-30 22:12:22 maslii 阅读数 1295更多

分类专栏：前端

本文链接： https://blog.csdn.net/Maslii/article/details/82228712

想法：从后台将数据显示到map上，同时可以根据查询条件进行查询并动态展示数据。

页面代码

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="header"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link href="css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet"> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <form class="form-horizontal m-t" id="FindForm"> <div class="form-group"> <label class="col-sm-1 control-label">查询条件：</label> <input type="text" class="col-sm-3 laydate-icon layer-date form-control" id="beginTime" name="beginTime" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="" readonly="readonly"/> <input type="text" class="col-sm-3 laydate-icon layer-date form-control" id="endTime" name="endTime" placeholder="结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="" readonly="readonly"/> <button class="btn btn-success" onclick="reLoad()" type="button">查询</button> </div> </form> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>结果展示</h5> <div class="ibox-tools"></div> </div> <div class="ibox-content"> <div style="height:450px" id="echarts-map-chart"></div> </div> </div> </div> </div> </div> <script src="/js/jquery.min.js?v=2.1.4"></script> <script src="/js/bootstrap.min.js?v=3.3.6"></script> <script src="/js/plugins/layer/layer.js"></script> <script src="/js/echarts.min.js"></script> <script src="/js/guangdong.js"></script> <script src="/js/plugins/layer/laydate/laydate.js"></script> <script src="/js/report.js"></script> </body> </html>

注意：
1、其中<script src="/js/guangdong.js"></script>是用于加载地图的js文件，下载地址，需要独立引入
2、<button class="btn btn-success" onclick="reLoad()" type="button">查询</button>查询按钮的类型一定要设置为button类型，没有设置的话，每次ajax取完数据后，刷新页面数据后还会再刷新一次，让你不禁很郁闷。

JS文件

// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts-map-chart')); var maxNum = 2000; var minNum = 0; var option = { backgroundColor: '#404a59', title: { text: '结果展示', subtext: '数据真实，来源准确', left: 'right', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item', formatter: function(params) { //params.value[0]:经度，params.value[1]：纬度，params.value[2]：值 return params.name + ": " + params.value[2]; } }, legend: { orient: 'vertical', y: 'bottom', x: 'right', data: ['人数'], textStyle: { color: '#fff' } }, toolbox: { show: true, orient: 'vertical', x: 'right', y: 'center', feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true }, } }, dataRange: { min: minNum, max: maxNum, x: 'left', y: 'bottom', color: ['red', 'orange', 'yellow'], text: ['高', '低'], calculable: true }, geo: { map: '广东', center: [113.292388, 23.115890], label: { emphasis: { show: false } }, zoom: 1.5, roam: true, mapStyle: { styleJson: [{ "featureType": "water", "elementType": "all", "stylers": { "color": "#044161" } }, { "featureType": "land", "elementType": "all", "stylers": { "color": "#004981" } }, { "featureType": "boundary", "elementType": "geometry", "stylers": { "color": "#064f85" } }, { "featureType": "railway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "color": "#004981" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#005b96", "lightness": 1 } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "geometry", "stylers": { "color": "#004981" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#00508b" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "green", "elementType": "all", "stylers": { "color": "#056197", "visibility": "off" } }, { "featureType": "subway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "manmade", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "boundary", "elementType": "geometry.fill", "stylers": { "color": "#029fd4" } }, { "featureType": "building", "elementType": "all", "stylers": { "color": "#1a5787" } }, { "featureType": "label", "elementType": "all", "stylers": { "visibility": "off" } }] }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [{ name: '人数', type: 'scatter', coordinateSystem: 'geo', data: [], symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true }, emphasis: { show: true } }, itemStyle: { normal: { color: '#ddb926' } } }] } $(function(){ myChart.setOption(option); }) function load() { $.ajax({ type : "POST", url : "/list", data: { beginTime : $('#beginTime').val(), endTime : $('#endTime').val() }, cache : false, async : false, success : function(result) { var res = []; console.log(result) for (var i = 0; i < result.length; i++) { //获得每个城市的统计数量 var count = result[i].value //获得经纬度 var geo = [ result[i].longitude, result[i].latitude ] res.push({ name : result[i].name, //两个字符串拼接 value : geo.concat(count), }); } myChart.setOption({ series : [ { name: '人数', data : res, } ] }); } }) } function reLoad() { load(); }

注意：
1、数据放于option里面，此处采用的是经纬度的方式，而且显示的地点名字是由后端传递过来的，所以地点名字不受官方提供的js或者json数据限制

后端代码

@PostMapping("/list") @ResponseBody public List<MapDto> highList(@RequestParam("beginTime") String beginTime, @RequestParam("endTime") String endTime) { List<MapDto> result = new ArrayList<>(); result.add(new MapDto("广州", 123L, 113.23, 23.16)); result.add(new MapDto("花县", 123L, 113.19, 23.4)); result.add(new MapDto("新十", 1213L, 114.2, 24.09)); result.add(new MapDto("增城", 213L, 113.81, 23.13)); result.add(new MapDto("从化", 133L, 113.55, 23.57)); result.add(new MapDto("龙门", 143L, 114.25, 23.75)); result.add(new MapDto("番禺", 523L, 113.36, 22.95)); result.add(new MapDto("海口", 453L, 110.35, 20.02)); result.add(new MapDto("汕头", 933L, 116.69, 23.39)); result.add(new MapDto("洪江", 733L, 110.38, 21.2)); result.add(new MapDto("茂名", 133L, 110.88, 21.68)); result.add(new MapDto("佛山", 14L, 113.11, 23.05)); result.add(new MapDto("江门", 143L, 113.06, 22.61)); result.add(new MapDto("深圳", 443L, 114.07, 22.62)); result.add(new MapDto("宝安", 1663L, 113.85, 22.58)); result.add(new MapDto("珠海", 173L, 113.52, 22.3)); result.add(new MapDto("韶关", 19L, 113.62, 24.84)); result.add(new MapDto("曲江", 193L, 113.58, 24.68)); result.add(new MapDto("乐昌", 1013L, 113.35, 25.14)); result.add(new MapDto("仁化", 1223L, 113.73, 25.11)); result.add(new MapDto("南雄", 12L, 114.33, 25.14)); result.add(new MapDto("始兴", 123L, 114.08, 24.78)); return result; }

附加：MapDto实体

public class MapDto { private String name; private Long value; //经纬度，一定要在你加载的js地图显示的区域内，例如这里加载的是广东省的， //所以生成的数据的经纬度都要在广东省内 private Double longitude; private Double latitude; //getter 和 setter }

总结：先加载一张地图，是根据经纬度的方式来加载的，然后在添加一些数据，数据就可以通过ajax方式进行动态写入并展示出来。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Vue 如何优雅的根据条件动态显示组件 4.万能的Map+模糊查询数码管动态显示 js动态显示时间 echarts散点图不能显示部分点的数据 echarts散点图不显示问题或宽度为0问题 div动态显示iframe内容 bootstrap loadStep流程节点动态显示 js实现动态显示时间 vue：图片切换动态显示

echarts map+散点图 按条件查询并动态显示结果

echarts map+散点图 按条件查询并动态显示结果

页面代码

JS文件

后端代码

免责声明！

echarts map+散点图按条件查询并动态显示结果

echarts map+散点图按条件查询并动态显示结果