What is data visualization screen?
Data visualization large screen is to display some key business indicators on one or more large LED screens through data visualization, with large screens as the main ones. Data visualization design of display carrier. That is to say, key data content is displayed through the entire oversized screen. Large screens can easily leave a shocking impression on people's look and feel, making it easy to create some unique atmosphere and create a sense of ceremony. Taking advantage of its large area and ability to display a large amount of information, sharing key information on a large screen can facilitate team discussions and decision-making, so large screens are also commonly used for data analysis and monitoring. It provides enterprises with direct presentation results, allowing business personnel and corporate decision-makers to intuitively face the information behind the data
Common dynamic effects on large screens
In the large screen demand planning stage, we need to understand clearly how the large screen is used, analyze the display needs, and decide whether the large screen needs some dynamic effects.
The dynamic effects referred to in this article are all automatic dynamic effects on the large screen, that is, they can be displayed on the large screen without human operation
image display 
scenes to be used
In order to make the large-screen visual design beautiful and tidy, we usually hide a large number of chart labels, but we also want the chart information to be displayed comprehensively. At this time, we can use the chart data prompt point carousel method to rotate the chart in sequence. Specific values for each series.
As shown in the template below, in order to be beautiful on the large screen, we use a special shape column chart in the extended chart, hide the labels, and use chart data point carousel prompts to make the specific data of the chart visible. can be displayed.
HTML partial code display
<!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);
})();What are the advantages of large-screen data visualization?
Advantage 1: Comprehensive understanding of data, making the data more intuitive and clear
Advantage 2: Supports free-style typesetting and layout
Advantage three: simple and easy to use, more convenient to use