❤️数据可视化❤️：基于 Echarts + Vue 实现的大屏范例【16】城市存量房大屏

​

---

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【城市存量房大屏 - 数据可视化大屏解决方案】。

1、首先看动态效果图 

2、分片截图  

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1920px*1080px，F11全屏后占满整屏无滚动条；支持同比例屏幕 100% 填充。则会自动计算比例居中填充，不足的部分则留白。

2、功能模块

• 本年度成交量
  
• 本月度成交量
  
• 挂牌均价指数趋势
  
• 城市供需趋势
  
• 新房源分布
  
• 二手房源分布
  
• 新房销量排行榜（月）
  
• 新房销量排行榜（年）
  
• 二手房销量排行榜（月）
  
• 二手房销量排行榜（年）
  

3、部署方式 

• 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；无需其它环境依赖；
• 观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

Echarts图表

直接进入 ​​components/​​下的文件修改成你想要的 echarts 图表，可以去echars官网里面查看案例。

渲染图表

 ECharts 图表都是 src/​​components/datav/index.vue​​ 封装组件创建的，动态渲染图表案例为 ​​components​​ 目录下各个图表组件，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。

边框样式

边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以。

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

<template>
    <div id="data-view">
        <dv-full-screen-container>
            <div class="main-header">
                <div class="mh-left">数据可视化 - 城市存量房大屏</div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 300px;">
                        深圳市
                    </dv-border-box-7>
                </div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        广州市
                    </dv-border-box-7>
                </div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        东莞市
                    </dv-border-box-7>
                </div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        惠州市
                    </dv-border-box-7>
                </div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        中山市
                    </dv-border-box-7>
                </div>
                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        汕头市
                    </dv-border-box-7>
                </div>

                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        汕尾市
                    </dv-border-box-7>
                </div>

                <div class="mh-right">
                    <dv-border-box-7
                        style="width: 100px; height: 50px; line-height: 50px; text-align:center; margin-left: 30px;">
                        湛江市
                    </dv-border-box-7>
                </div>


            </div>

            <dv-border-box-1 class="main-container">
                <div class="mc-top">
                    <Top-Left-Cmp />
                    <Top-Middle-Cmp />
                    <Top-right-Cmp />
                </div>
                <div class="mc-bottom">
                    <dv-border-box-6 class="bottom-left-container">
                        <dv-decoration-4 class="mcb-decoration-1" style="width:5px;height:45%;" />
                        <dv-decoration-4 class="mcb-decoration-2" style="width:5px;height:45%;" />
                        <Bottom-Left-Chart-1 />
                        <Bottom-Left-Chart-2 />
                    </dv-border-box-6>

                    <div class="bottom-right-container">
                        <Bottom-Right-Table-1 />
                        <Bottom-Right-Table-2 />
                        <Bottom-Right-Table-3 />
                        <Bottom-Right-Table-4 />
                    </div>
                </div>
            </dv-border-box-1>

        </dv-full-screen-container>
    </div>
</template>

<script>
    import TopLeftCmp from './TopLeftCmp'
    import TopMiddleCmp from './TopMiddleCmp'
    import TopRightCmp from './TopRightCmp'

    import BottomLeftChart1 from './BottomLeftChart1'
    import BottomLeftChart2 from './BottomLeftChart2'

    import BottomRightTable1 from './BottomRightTable1'
    import BottomRightTable2 from './BottomRightTable2'
    import BottomRightTable3 from './BottomRightTable3'
    import BottomRightTable4 from './BottomRightTable4'

    export default {
        name: 'DataView',
        components: {
            TopLeftCmp,
            TopMiddleCmp,
            TopRightCmp,
            BottomLeftChart1,
            BottomLeftChart2,
            BottomRightTable1,
            BottomRightTable2,
            BottomRightTable3,
            BottomRightTable4
        },
        data() {
            return {}
        }
    }
</script>

<style lang="less">
    #data-view {
        width: 100%;
        height: 100%;
        background-color: #030409;
        color: #fff;

        #dv-full-screen-container {
            // background-image: url('./img/bg.png');
            background-size: 100% 100%;
            box-shadow: 0 0 3px blue;
            display: flex;
            flex-direction: column;
        }

        .main-header {
            height: 80px;
            margin-left: 40px;
            display: flex;
            // justify-content: space-between;
            justify-content: center;
            align-items: center;

            .mh-left {
                font-size: 30px;
                font-weight: bold;
                color: rgb(1, 134, 187);

                a:visited {
                    color: rgb(1, 134, 187);
                }

                width: 400px;
            }

            .mh-right {
                font-size: 20px;
                font-weight: bold;
            }
        }

        .main-container {
            height: calc(~"100% - 80px");

            .mc-top,
            .mc-bottom {
                box-sizing: border-box;
                padding: 30px;
                display: flex;
            }

            .mc-top {
                height: 40%;
            }

            .mc-bottom {
                height: 60%;
            }

            .top-left-cmp,
            .bottom-left-container {
                width: 32%;
            }

            .top-middle-cmp,
            .top-right-cmp {
                width: 34%;
            }

            .bottom-left-container {
                position: relative;

                .border-box-content {
                    display: flex;
                }

                .mcb-decoration-1,
                .mcb-decoration-2 {
                    position: absolute;
                    left: 50%;
                    margin-left: -2px;
                }

                .mcb-decoration-1 {
                    top: 5%;
                    transform: rotate(180deg);
                }

                .mcb-decoration-2 {
                    top: 50%;
                }

                .bottom-left-chart-1,
                .bottom-left-chart-2 {
                    width: 50%;
                    height: 100%;
                }
            }

            .bottom-right-container {
                width: 68%;
                padding-left: 30px;
                box-sizing: border-box;
                display: flex;
            }
        }
    }
</style>

<template>
    <div class="top-left-cmp">
        <div class="dc-left">
            <dv-border-box-5>
                <div class="main-value"><span>101</span>套</div>
                <div class="compare-value"><span>同比增加</span>801</div>
                <div class="compare-value"><span>环比增加</span>1500</div>
            </dv-border-box-5>
            <div class="dc-text">
                本年度成交量
                <dv-decoration-3 style="width:200px;height:20px;" />
            </div>
        </div>
        <div class="dc-right">
            <div class="dc-text">
                本月度成交量
                <dv-decoration-3 style="width:200px;height:20px;" />
            </div>
            <dv-border-box-5 :reverse="true">
                <div class="main-value"><span>208</span>套</div>
                <div class="compare-value"><span>同比增加</span>660</div>
                <div class="compare-value"><span>环比增加</span>9878</div>
            </dv-border-box-5>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'TopLeftCmp'
    }
</script>

<style lang="less">
    .top-left-cmp {
        display: flex;

        .dc-left,
        .dc-right {
            width: 50%;
        }

        .dv-border-box-5 {
            height: 60%;
        }

        .dc-text {
            display: flex;
            flex-direction: column;
            height: 40%;
            font-size: 20px;
            padding: 20px;
            box-sizing: border-box;
        }

        .dc-left .dc-text {
            align-items: flex-end;
            justify-content: center;
        }

        .dc-right .dc-text {
            justify-content: flex-start;
            padding-top: 20px;
        }

        .dc-left .dv-border-box-5 {
            padding: 30px;
            box-sizing: border-box;
        }

        .dc-right .dv-border-box-5 {
            padding: 40px;
            padding-left: 75px;
            box-sizing: border-box;
        }

        .main-value {
            font-weight: bold;
            font-size: 30px;

            span {
                font-size: 50px;
                color: #00c0ff;
                margin-right: 15px;
            }
        }

        .compare-value {
            height: 35px;
            line-height: 35px;
            font-size: 18px;

            span {
                margin-right: 30px;
            }
        }
    }
</style>

四、上线运行

启动项目

需要提前安装好 ​​nodejs​​ 与 ​​yarn​​,下载项目后在项目主目录下运行 ​​yarn​​ 拉取依赖包。安装完依赖包之后然后使用 ​​vue-cli​​ 或者直接使用命令​​npm run serve​​，就可以启动项目，启动项目后需要手动全屏（按 F11）。

​