现在真的越来越多的数据可视化大屏的要求了，双十一的炫酷大屏，说了太多大屏的做法，我们今天就具体来实操一下吧！
最近智慧园区，智慧城市，智慧政府盛行，我们今天就房地产行业来进行实战吧！
一、页面分析
1、整体简介
主题表：使用rand()函数产生随机数
页面结构：宽百分比，高固定
【市场】
房地产-1
【存量房】
房地产-2
【商品房】
房地产-3
二、模块详解
2.1 市场分析
1）概览以指标卡的形式直观展现3大核心指标：总投资数、总成交额、总投资数
2）近年房产开发投资走势以柱状图及线状图结合的形式展现地产、住宅、地产同比、住宅同比走势
3）近年来房产开发占比通过HTML南丁格尔玫瑰图展示了各个地区的房产开发占比情况
4）中心地图通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）土地成交情况通过占比图和图片的叠加，展示近4个月的土地成交情况实现方法：电池图片和占比图放在同一容器中，图片置于顶层
6）房屋新开工情况通过面积图展示房屋新开工情况，设置透明度让整个展现更加清爽。
5.png (48.79 KB, 下载次数: 6)
下载附件
2020-5-24 17:48 上传
7）房屋施工情况
通过图片和文本组合的方式，直观清晰的展示了近4个月的房屋施工情况，包括每个月的住宅施工、房屋施工。
2.2 存量房
1）实时播报以表格滚动的形式的形式展示存量房的成交具体信息
2）今日交易通过指标卡的形式展示了今日的交易情况，包括：房屋数、价格、面积
3）本月交易通过指标卡的形式展示了本月的交易情况，包括：房屋数、价格、面积
4）中心地图通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）本月实时交易情况通过柱状图和线状图的组合，展示了本月每天交易的房屋套数和均价，让整个交易情况一目了然。
6）近5个月成交面积top5通过面积图展示存量房和存量住房的近5月的成交面积情况
7）各环线存量房成交情况通过通过饼图和表格的组合展示了各环的成交情况。
2.3 商品房
1）实时播报以表格滚动的形式的形式展示商品房房的成交具体信息
2）今日交易通过指标卡的形式展示了今日的交易情况，包括：房屋数、价格、面积
3）本月交易通过指标卡的形式展示了本月的交易情况，包括：房屋数、价格、面积
4）中心地图通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）本月实时交易情况通过柱状图和线状图的组合，展示了本月每天交易的房屋套数和均价，让整个交易情况一目了然。
6）近5个月成交面积top5通过3D柱状图展示了全市近5个月的成交面积前5名
7）各模块商品房成交情况通过气泡图展示了各个价格的成交量
8）各环线商品房成交情况通过堆积图展示了各环的商品房成交情况
二、脚本说明脚本1：表格滚动
GRID9是需要进行滚动的表格名称，HHH2是表格所在的容器名称
**表格内容自动轮播脚本
**@param tableDom内容滚动的表格，最好是表格的父DIV
**@param visibleHeight 可视区的高度
***/
function autoScrollTable(tableDom, visibleHeight) {
var marqueesHeight = visibleHeight;
var stopscroll = false;
var scrollElem = tableDom;
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
with (scrollElem) {
style.height = parseFloat(marqueesHeight) + "px";
style.overflow = 'hidden';
noWrap = true;
}
var scrollUp = function () {
if (stopscroll) {
setTimeout(scrollUp, 50);
return;
}
currentTop += 1;
if (currentTop == (marqueesHeight + 1)) {
stoptime += 1;
currentTop -= 1;
if (stoptime == 1) {
currentTop = 0;
stoptime = 0;
}
} else {
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if (preTop == scrollElem.scrollTop) {
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
setTimeout(scrollUp, 50);
};
var restartScroll = function () {
scrollElem.scrollTop = 0;
setTimeout(scrollUp, 50);
};
jQuery(tableDom).hover(function () {
stopscroll = true;
}, function () {
stopscroll = false;
});
setTimeout(restartScroll, 2000);
}
autoScrollTable(document.getElementById('GRID9'),document.getElementById("HHH2").clientHeight);
复制代码
脚本2：更改滚动条样式
脚本中引用了js脚本文件，文件的存储在资源管理器中(路径为
:vfs/root/products/ebi/sys/slimscrollbody.js）
//更改滚动条样式
EUI.addStyleSheet("#BODYAREA{overflow:hidden !important}");
EUI.addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
EUI.addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#062E33 !important;}");
EUI.include("vfs/root/products/ebi/sys/slimscrollbody.js");
复制代码
网友评论