厦门房价地图可视化

最新推荐文章于 2022-12-20 20:03:57 发布

chenwr_727

最新推荐文章于 2022-12-20 20:03:57 发布

阅读量1k

点赞数 2

分类专栏：厦门房价文章标签：可视化 echarts

本文链接：https://blog.csdn.net/chenwr_727/article/details/79252580

版权

厦门房价专栏收录该内容

2 篇文章 0 订阅

订阅专栏

厦门房价地图可视化

基于链家数据，结合百度地图进行厦门房价可视化：

这里写图片描述

<!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>

chenwr_727

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
厦门房价地图可视化

厦门房价地图可视化基于链家数据，结合百度地图进行厦门房价可视化：html style="height: 100%">head> meta charset="utf-8"> title>厦门房价title>head>style type="text/css"> -- a:link { color: #ffffff; }
复制链接

扫一扫