本文主要是介绍厦门房价地图可视化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
厦门房价地图可视化
基于链家数据，结合百度地图进行厦门房价可视化：
<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"><title>厦门房价</title>
</head>
<style type="text/css"><!-- a:link {color: #ffffff;}a:visited {color: #B0B0B0;}a:active {color: #ff0000;}-->
</style><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script><script type="text/javascript" src=.\\js\\house_price.js></script><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;app.title = '散点图与百度地图扩展';myChart.setOption(option = {animation: false,bmap: {center: [118.088441, 24.511069],zoom: 13,roam: true},tooltip: {enterable: true,trigger: 'item',hideDelay: 1000, /* alwaysShowContent: true, */formatter: function (obj) {var value = obj.value;var str = ''for (i = 0; i < value[4].length; i++) {str += '<a href="' + value[5][i] + '" target="_blank">' + value[4][i] + '</a><br>';}return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +value[2] + ': ' + value[3] + ' 元/平方米' +'</div>' +str}},visualMap: {show: true,top: 'top',dimension: 3,min: price_min,max: price_max,calculable: true,inRange: {color: ['yellow', 'red'],symbolSize: [5, 20]}},series: [{name: '均价(元/平方米)',type: 'scatter',coordinateSystem: 'bmap',data: points,},{name: 'Top 10',type: 'effectScatter',coordinateSystem: 'bmap',data: points.slice(0, 10),showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: function (param) {return param.data[2];},position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]});if (!app.inNode) {// 添加百度地图插件var bmap = myChart.getModel().getComponent('bmap').getBMap();bmap.addControl(new BMap.MapTypeControl());};if (option && typeof option === "object") {myChart.setOption(option, true);}</script>
</body></html>这篇关于厦门房价地图可视化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
