基于大数据的房价分析--3.echart+百度地图实现数据可视化
来源：互联网 发布：淘宝虚拟物品手动发货 编辑：程序博客网 时间：2024/04/26 07:33
要实现的是在百度地图中画出房屋散点图,能进行区域选择,动态刷新显示该区域的房价数据雷达图,具体效果如下
1.在echarts中集成百度地图
要使用百度地图,必须要有开发者AK和百度地图js包
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script><script src="/Plug-in/echarts-master/dist/extension/bmap.min.js"></script>引入之后在option中加入如下设置bmap: { // 百度地图中心经纬度 center: [114.314129, 30.550339], // 百度地图缩放(即地图范围) zoom: 12, // 是否开启拖拽缩放，可以只设置 'scale(只能缩放)' 或者 'move(只能移动)' roam: 'true', // 百度地图的自定义样式 mapStyle: { 'styleJson': [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#031628' } }, { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#000102' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'arterial', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#0b3d51' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#08304b' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -70 } }, { 'featureType': 'building', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'all', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#857f7f' } }, { 'featureType': 'all', 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#000000' } }, { 'featureType': 'building', 'elementType': 'geometry', 'stylers': { 'color': '#022338' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'color': '#062032' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#465b6c' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#022338' } }, { 'featureType': 'label', 'elementType': 'all', 'stylers': { 'visibility': 'on' } } ] ,}在散点图的series中指定坐标系为百度地图coordinateSystem: 'bmap',2.区域刷选
1.添加区域刷选工具栏
在option中加入如下设置brush: { //工具栏外观 brushStyle: { borderWidth: 2, color: 'rgba(0,0,0,0.2)', borderColor: 'green', }, //设定刷选类型,停止后刷选还是一定频率刷选 throttleType: 'debounce', //停止多久后刷选 throttleDelay: 300, //未被选择的区域外观 outOfBrush: { }},2.刷选函数
//动态渲染雷达图function renderBrushed(params){ this.setOption({ //进行区域选择时,关闭百度地图的移动选项,否则会冲突 bmap: { roam: 'scale' } }) var mainSeries = params.batch[0].selected[0]; var allSum = 0; var count = 0; var max = 0; var min = null; for (var i = 0; i < mainSeries.dataIndex.length; i++) { var rawIndex = mainSeries.dataIndex[i]; var dataItem = data[rawIndex]; val = dataItem.value[2]; allSum += val if(!min||val < min){ min = val; } if(val > max){ max = val; } count += 1; } var unitPrice = allSum / count; this.setOption({ series:{ title:'区域雷达图', //此处id为series中雷达图id id:"radarBrush", data:[[unitPrice,max,min]] } }) }3.绑定事件
mapChart.on('brushselected',renderBrushed);3.刷选完毕后重置百度地图移动
在刷选时必须关闭百度地图的移动功能,否则刷选框会无法移动,刷选完毕后通过自定义一个开启移动按钮来开启百度地图移动toolbox: { feature: { myTool1: { show: true, title:"开启百度地图移动", icon: "image://http://localhost:8000/Image/icon/移动2.png", onclick: function (a) { mapChart.setOption({ //手动开启百度地图的移动选项 bmap: { roam: 'true' } }) } }},4.优化
以上的设置在一般情况下已经能用了,但是在数据量非常大的时候,页面会非常卡顿,有两种方法可以优化这个问题1.使用echarts-gl加速,将series中图表type改为scatterGL,但是目前区域刷选不支持scatterGL,开启后无法进行数据刷选,而且很坑的就是目前百度官网上给的echarts版本与给出的echartsgl版本是不匹配的,必须选择历史版本的ecahrts-gl,点这里下载
2.在series中加入large:True选项,然后使用largeThreshold属性设定阈值,在达到阈值时开启绘制优化,这种方式也有个问题就是开启绘制优化后无法为每个点单独设置样式,也就是说每个点的颜色大小都会变得相同,visualMap会失效
源码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html><html><head> <meta charset="utf-8"> <title>坐标转换</title> <style> html, body, #main { width: 100%; height: 100%; margin: 0; } </style></head><body><div id="main"></div><script src="/Plug-in/jquery/jquery-3.2.1.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxx"></script><script src="/Plug-in/echart/echarts.js"></script><script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script><script src="/Plug-in/echarts-master/dist/extension/bmap.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script><script> $(function() { //雷达图渲染 function renderBrushed(params){ this.setOption({ //进行区域选择时,关闭百度地图的移动选项 bmap: { roam: 'scale' } }) var mainSeries = params.batch[0].selected[0]; var allSum = 0; var count = 0; var max = 0; var min = null; for (var i = 0; i < mainSeries.dataIndex.length; i++) { var rawIndex = mainSeries.dataIndex[i]; var dataItem = data[rawIndex]; val = dataItem.value[2]; allSum += val if(!min||val < min){ min = val; } if(val > max){ max = val; } count += 1; } var unitPrice = allSum / count; this.setOption({ series:{ title:'区域雷达图', id:"radarBrush", data:[[unitPrice,max,min]] } }) } //时间戳转换函数 function getTime(timeStamp){ return new Date(parseInt(timeStamp) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '); } //房价数据构造函数 function loadDatas(url,chart) { data = []; chart.showLoading() $.ajax({ type:'post', url:url, data:paramters, dataType:'json', success:function (datas) { for (var i in datas) { data.push({name:{"address":datas[i]['address'],"sumPrice":datas[i]['sumPrice'],"city":datas[i]['city'],"size":datas[i]['size'],"roomNum":datas[i]['roomNum'],"orient":datas[i]['orient'],"time":getTime(datas[i]['time'])},value:[datas[i]['ln'],datas[i]['lat'],parseInt(datas[i]['unitPrice'])]}); } chart.setOption({ series:[{ data: data }] }) chart.hideLoading() } }) } function loadDatasFromJson(url,chart){ data = [] $.getJSON(url,function(datas){ for (var i in datas) { data.push({name:{"address":datas[i]['address'],"sumPrice":datas[i]['sumPrice'],"city":datas[i]['city'],"size":datas[i]['size'],"roomNum":datas[i]['roomNum'],"orient":datas[i]['orient'],"time":getTime(datas[i]['time'])},value:[datas[i]['ln'],datas[i]['lat'],parseInt(datas[i]['unitPrice'])]}); } chart.setOption({ series:[{ data: data }] }) chart.hideLoading() }) } //echart加载设置 var option = { /* geo: { map: 'china', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, */ //加载百度地图组件 bmap: { // 百度地图中心经纬度 center: [114.314129, 30.550339], // 百度地图缩放(即地图范围) zoom: 12, // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move' roam: 'true', // 百度地图的自定义样式 mapStyle: { 'styleJson': [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#031628' } }, { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#000102' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'arterial', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#0b3d51' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#08304b' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -70 } }, { 'featureType': 'building', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'all', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#857f7f' } }, { 'featureType': 'all', 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#000000' } }, { 'featureType': 'building', 'elementType': 'geometry', 'stylers': { 'color': '#022338' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'color': '#062032' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#465b6c' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#022338' } }, { 'featureType': 'label', 'elementType': 'all', 'stylers': { 'visibility': 'on' } } ] } }, //提示框 tooltip:{ trigger:'item', enterable:true, formatter:function(content){ var message = content['data']['name']; var value = content['data']['value']; return '<div class="tooltip" >详细地址:'+message['address']+ '<br>总价格:'+message['sumPrice']+'万<br>均价'+ value[2]+"<br>面积:"+message['size']+'㎡ <br>'+ '房型:'+message['roomNum']+ "</div>"; }, }, //数据映射 visualMap:{ type: 'continuous', min: 5000, max: 40000, calculable: true, color: ['red','yellow','lightskyblue'] }, //工具栏外观 toolbox: { feature: { myTool1: { show: true, title:"开启百度地图移动", icon: "image://http://localhost:8000/Image/icon/移动2.png", onclick: function (a) { mapChart.setOption({ //手动开启百度地图的移动选项 bmap: { roam: 'true' } }) } } }, iconStyle: { normal: { borderColor: '#fff' }, emphasis: { borderColor: '#b1e4ff' } } }, //区域选择工具栏 brush: { brushStyle: { borderWidth: 2, color: 'rgba(0,0,0,0.2)', borderColor: 'green', }, throttleType: 'debounce', throttleDelay: 300, outOfBrush: { } }, //雷达图 radar: { radius:'20%', center:['90%','25%'], shape:'circle', indicator: [ {name: '平均价格', max: 30000}, {name: '最高价格', max: 30000}, {name: '最低价格', max: 30000}, ], splitNumber: 3, name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 1, padding: [3, 5] } }, }, series: [{ id:'main', type: 'scatter', // 使用百度地图坐标系 //large:true, coordinateSystem: 'bmap', // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...] data: [], symbolSize:4, itemStyle: { normal: { color: 'rgba(37, 140, 249, 0.8)' } }, },{ id:"radarBrush", name: '武汉', type: 'radar', tooltip:{ formatter:function(ret){ return "该区域平均价格为:"+parseInt(ret['data'][0])+"<br>" + "最高价格为:"+ret['data'][1]+"<br>"+ "最低价格为:"+ret['data'][2]+"<br>"; } }, }] } var paramters = { "city":"湖北武汉", "number":1000, "isDataLimit":1 }; var mapChart = echarts.init($("#main")[0]); mapChart.setOption(option); mapChart.on('brushselected',renderBrushed); var init = function(){ loadDatas("http://localhost:8000/house/datas.do",mapChart); } init(); })</script></body></html>后端api的编写参照另一篇博客即可,我怕取的216W条解析过地址的房价信息可以在这里下载
阅读全文
0 0
- 基于大数据的房价分析--3.echart+百度地图实现数据可视化
- 基于大数据的房价分析
- 基于大数据的房价分析--1.数据爬取
- 基于大数据的房价分析--2.数据解析
- 非常完美的大数据可视化js库-----Echart
- 大数据初体验——基于地图可视化分析新浪新闻评论地域分布特点
- 基于大数据的房价分析--4.用spring搭建后端接口
- 快速基于echarts的大数据可视化
- 快速基于echarts的大数据可视化
- 如何利用大数据分析一个城市的房价
- 探码TMDash大数据小数据快速实现可视化分析
- 大数据的“可视化”案例：360的“骗子地图”
- 大数据的可视化
- 数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)
- 大数据"可视化"案例：360"骗子地图"
- 基于EChart的地图选择器
- 利用R语言实现spark大数据分析与可视化
- Python画地图数据可视化分析
- JQuery判断数组中是否包含某个元素
- 【第十五周项目1】验证算法——直接插入排序
- C++实现三维空间中点到点、点到直线、点到平面的距离计算
- 15周 项目1
- Ubuntu 16.04下Intel SGX应用程序程序开发——参数字符串拷贝
- 基于大数据的房价分析--3.echart+百度地图实现数据可视化
- cifar10 training tips
- 使用eclipse创建，并读取yaml文件
- 拒绝低效的提问
- Fiori学习笔记
- 走捷径发展连接LED照明系统---凯利讯半导体
- 金山云力争3年内抢占30%IaaS市场 拼掉腾讯云是关键
- 数据结构学期总结
- 第十五周——项目一—验证算法（3）交换排序之冒泡排序
