Hadoop综合项目——二手房统计分析（可视化篇）

文章目录

Hadoop综合项目——二手房统计分析（可视化篇）
- 0、写在前面
- 1、数据可视化
- - 1.1 二手房四大一线城市总价Top5
  - 1.2 统计各个楼龄段的二手房比例
  - 1.3 统计各个城市二手房标签的各类比例
  - 1.4 统计各个城市各个楼层的平均价格
  - 1.5 统计各个城市二手房优势的各类比例
  - 1.6 统计各个城市二手房数量和关注人数的关系
  - 1.7 统计各个城市二手房规格的各类比例
  - 1.8 统计二手房面积区间范围的数量
- 2、数据及源代码
- 3、总结

在这里插入图片描述

0、写在前面

Windows版本：Windows10
Linux版本：Ubuntu Kylin 16.04
JDK版本：Java8
Hadoop版本：Hadoop-2.7.1
Hive版本：Hive1.2.2
IDE：IDEA 2020.2.3
IDE：Pycharm 2021.1.3
IDE：Eclipse3.8
可视化工具：Apache Echarts

数据可视化篇一共做了8个不同的可视化界面，包括柱状图、折线图、饼图、复合图、曲线图等等。

1、数据可视化

数据可视化篇：使用MapReduce和Hive统计分析的结果进行可视化展示

1.1 二手房四大一线城市总价Top5

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手房四大一线城市总价Top5</title>
    <!-- 引入 echarts.min.js -->
    <script src="static/echarts/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px; float: left"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'dark');
    var app = {};
    var option ;

    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {}
        }
    };
    option = {
        title: {
            text: '二手房四大一线城市总价Top5'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: true,
            top: "6%",
            right: "5%",
            data: ['上海', '北京', '广州', '深圳']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                name: 'Top5',
                axisTick: { show: false },
                data: ['1', '2', '3', '4', '5']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位（万元）'
            }
        ],
        series: [
            {
                name: '上海',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [3980, 3314, 3280, 3200, 2980]
            },
            {
                name: '北京',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [3150, 3050, 2750, 2736, 2350]
            },
            {
                name: '广州',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [3720, 2430, 2350, 2220, 2153]
            },
            {
                name: '深圳',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [3792, 2800, 2532, 2305, 2300]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述

Note：因代码过长的原因，下文中的其他7个可视化界面不再展示代码，本项目的全部数据和源代码都已经上传到Github和Gitee上，下文中有地址。

1.2 统计各个楼龄段的二手房比例

Note：此处不统计未知建造年份的二手房

1.3 统计各个城市二手房标签的各类比例

1.4 统计各个城市各个楼层的平均价格

1.5 统计各个城市二手房优势的各类比例

1.6 统计各个城市二手房数量和关注人数的关系

1.7 统计各个城市二手房规格的各类比例

1.8 统计二手房面积区间范围的数量

2、数据及源代码

Github
Gitee

3、总结

数据可视化是通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。数据通过图片展示，可以直观地表达项目体现出来的价值，这也是数据处理和分析的最终成果体现。本项目通过使用开源图表工具Echarts示例来展示项目的成果。可视化按照示例模板来，设置好必要的参数，横轴必要时可以将文字适当地倾斜一定的角度以展示完全，基本上就不会有太大的问题。