什么是数据可视化大屏？
数据可视化大屏是将一些业务的关键指标通过数据可视化的方式展示到一块或多块LED大屏上，以大屏为主要展示载体的数据可视化设计。也就是通过整个超大尺寸的屏幕来展示关键数据内容。大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。利用其面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论和决策，所以大屏也常用来做数据分析监测使用。为企业提供的是直接的呈现结果，让业务人员和企业决策者直观面对数据背后的信息
大屏常见动态效果
在大屏需求规划阶段，我们就要了解清楚大屏的使用方式，分析展示需求，决定大屏是否需要一些动态效果。
本文所指的动态效果均为大屏上自动的动态效果，即不需要人为操作就可以展示在大屏上
图片展示 
使用场景
为了大屏视觉设计的美观整洁，我们通常隐藏掉了大量的图表标签，但又希望图表信息展示全面，此时可以使用图表数据提示点轮播的方式，依次轮播图表中每个系列的具体数值。
如下图中的模板，为了大屏美观我们使用了扩展图表中的特殊形状柱形图，并隐藏掉标签，使用图表数据点轮播提示，让图表具体数据也能被展示出来。
HTML部分代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>互联网+智慧养老云平台</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/icomoon.css">
</head>
<body>
<img src="./images/head.gif" alt="" style="width: 1200px;position: absolute;top:-260px;left: 200px;">
<h1 style="position: absolute;top: 18px;z-index: 999;color: #fff;font-size:28px;left: 43%;">互联网+智慧养老云平台</h1>
<div class="viewport">
<div class="column">
<div class="overview panel">
<div class="inner">
<div class="item">
<h4>2,190</h4>
<span>
<i class="icon-dot" style="color: #006cff"></i>
门店总数
</span>
</div>
<div class="item">
<h4>190</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
新增门店
</span>
</div>
<div class="item">
<h4>3,001</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
实际总数
</span>
</div>
<div class="item">
<h4>108</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
(筹建中...)
</span>
</div>
</div>
</div>
<!--监控-->
<div class="monitor panel">
<div class="inner">
<div class="tabs">
<a href="javascript:;" data-index="0" class="active">故障设备监控</a>
<a href="javascript:;" data-index="1">异常设备监控</a>
</div>
<div class="content" style="display: block;">
<div class="head">
<span class="col">故障时间</span>
<span class="col">设备地址</span>
<span class="col">异常代码</span>
</div>
<div class="marquee-view">
<div class="marquee">
<div class="row">
<span class="col">20180701</span>
<span class="col">11北京市昌平西路金燕龙写字楼</span>
<span class="col">1000001</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190601</span>
<span class="col">湖北省武汉市珞狮南路306号</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190704</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000003</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20180701</span>
<span class="col">北京市昌平区建路金燕龙写字楼</span>
<span class="col">1000004</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190701</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000005</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190701</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000006</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190701</span>
<span class="col">北京市昌平区建西路金燕龙写字楼</span>
<span class="col">1000007</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190701</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000008</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190701</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000009</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">20190710</span>
<span class="col">湖北省武汉市珞狮南路306号楼</span>
<span class="col">1000010</span>
<span class="icon-dot"></span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="head">
<span class="col">异常时间</span>
<span class="col">设备地址</span>
<span class="col">异常代码</span>
</div>/*大屏*/
//自调用函数
(function () {
// 1、页面一加载就要知道页面宽度计算
var setFont = function () {
// 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
var html = document.documentElement;// 获取html
// 获取宽度
var width = html.clientWidth;
// 判断
if (width < 1024) width = 1024
if (width > 1920) width = 1920
// 设置html的基准值
var fontSize = width / 80 + 'px';
// 设置给html
html.style.fontSize = fontSize;
}
setFont();
// 2、页面改变的时候也需要设置
// 尺寸改变事件
window.onresize = function () {
setFont();
}
})();
(function () {
//事件委托
$('.monitor').on('click', ' a', function () {
//点击当前的a 加类名 active 他的兄弟删除类名
$(this).addClass('active').siblings().removeClass('active');
//获取一一对应的下标
var index = $(this).index();
//选取content 然后狗日对应下标的 显示 当前的兄弟.content隐藏
$('.content').eq(index).show().siblings('.content').hide();
});
//滚动
//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
// 然后动画向上滚动，滚动到一半重新开始滚动
//因为选取的是两个marquee 所以要遍历
$('.monitor .marquee').each(function (index, dom) {
//将每个 的所有子级都复制一遍
var rows = $(dom).children().clone();
//再将新的到的加入原来的
$(dom).append(rows);
});
})();
(function () {
var myechart = echarts.init($('.pie')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 控制图表
series: [
{
// 图表名称
name: '地区',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: [
{ value: 20, name: '云南' },
{ value: 5, name: '北京' },
{ value: 15, name: '山东' },
{ value: 25, name: '河北' },
{ value: 20, name: '江苏' },
{ value: 35, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 40, name: '湖北' }
],
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}
],
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
};
myechart.setOption(option);
})();数据可视化大屏优点有哪些？
优点一：全面认识数据，使数据更加直观清晰
优点二：支持自由式排版布局
优点三：简单易用，使用更加方便