contenido
1. Primer vistazo a las representaciones dinámicas
2. Mire el gráfico de datos de fragmentación en tiempo real
1. Confirmación de necesidades
1. Determinar la resolución de LED de pantalla para la implementación en línea del producto
2. Diseño de arquitectura general
3. Creación del entorno de desarrollo
1. Configuración del entorno de desarrollo de Java
2. configuración de la biblioteca json
Cuarto, implementación de codificación (código clave)
5. Descripción de la estructura del código
2. Descripción Léame del proyecto
Five, descarga del código fuente
El surgimiento de la visualización de datos en pantalla grande ha desencadenado una ola tras otra, y muchos dueños de negocios han querido construir su propia cabina de mando en pantalla grande "genial y deslumbrante" del autoritario presidente. Lo que comparto con ustedes hoy es [Análisis de datos empresariales de Internet] .
Antes, mis amigos me sugirieron que tomara algunos cursos en video para aprender Echarts, para poder comenzar más rápido, así que grabé "Echarts - 0 Curso básico de introducción" Echarts-0 Introducción básica - Otros tutoriales en video - Lenguaje de programación - Capacitación para programadores CSDN instituto _
Mostrar resultados
1. Primer vistazo a las representaciones dinámicas
2. Mire el gráfico de datos de fragmentación en tiempo real
1. Confirmación de necesidades
1. Determinar la resolución de LED de pantalla para la implementación en línea del producto
1920px*1080px, pantalla completa después de F11 pantalla completa y sin barra de desplazamiento. También se pueden adaptar otras resoluciones.
2. Módulos funcionales
- Análisis de fuentes de acceso de usuarios (gráfico circular): incluidos motores de búsqueda, publicidad de afiliados, acceso directo
- Distribución de las áreas visitadas (gráfico de barras + mapa + mapa de calor): Zhejiang, Shanghai, Guangdong, Beijing
- Distribución por edades (gráfico circular): 0+, 20-29, 30-39, 40-49, 50+
- Distribución ocupacional (gráfico circular): comercio electrónico, educación, TI/Internet, finanzas, estudiantes, otros
- Distribución de intereses (gráfico circular): automóvil, viajes, finanzas, educación, software, otros
- Distribución de dispositivos terminales (gráfico de líneas): uso de dispositivos móviles Android + iOS
- Visitas de los 5 canales principales (gráfico de barras): muestra los últimos 5 canales principales en tiempo real
- Me gusta Top5 (gráfico circular): Visualización en tiempo real de las últimas regiones Top5
3. Método de implementación
Programa ejecutable sin instalación: admite Windows, Linux, Mac y otros sistemas operativos; simplemente copie el programa en el servidor, no se requieren otras dependencias del entorno;
Método de visualización: puede ver la interfaz del programa directamente en el servidor, o puede abrir y jugar de forma remota con un navegador, como el navegador Chrome, el navegador 360, etc.
2. Diseño de arquitectura general
- El front-end está diseñado en base a la biblioteca de código abierto Echarts y utiliza el editor WebStorm;
- El backend se implementa en base a Java Web, utilizando el editor IDEA;
- Formato de transmisión de datos: JSON;
- Tipo de fuente de datos: actualmente se admiten PostgreSQL, MySQL, Oracle, Microsoft SQL Server, SQLite, formulario de Excel, etc., y también se puede personalizar la interfaz API HTTP u otros tipos de bases de datos.
- Método de actualización de datos: utilice el método de sondeo http get . En aplicaciones prácticas, también puede elegir monitorear la actualización en tiempo real de los datos de back-end y enviarlos al front-end en tiempo real según la situación;
3. Creación del entorno de desarrollo
1. Configuración del entorno de desarrollo de Java
Luego GENERAR, descargar el paquete.
2. configuración de la biblioteca json
Usando la biblioteca json de alibaba, agregue la configuración al archivo pom.xml:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>Cuarto, implementación de codificación (código clave)
1. Código html de front-end
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="*" http-equiv="Access-Control-Allow-Origin"/>
<title>index</title>
<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/comon0.css" rel="stylesheet">
</head>
<script>
$(window).load(function () {
$(".loading").fadeOut()
})
/****/
$(document).ready(function () {
var whei = $(window).width()
$("html").css({fontSize: whei / 20})
$(window).resize(function () {
var whei = $(window).width()
$("html").css({fontSize: whei / 20})
});
});
</script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/js.js"></script>
<body>
<div class="canvas" style="opacity: .2">
<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
<h1>大数据可视化展板 —— 互联网企业数据分析</h1>
<div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
<script>
//alert("aaaaaa");
var t = null;
t = setTimeout(time, 1000);//开始运行
function time() {
clearTimeout(t);//清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours();//获取时
var m = dt.getMinutes();//获取分
var s = dt.getSeconds();//获取秒
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
//async_data();
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</div>
<div class="mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">用户访问来源</div>
<div class="allnav" id="echart1"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">访问地区分布</div>
<div class="allnav" id="echart2"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div style="height:100%; width: 100%;">
<div class="sy" id="fb1"></div>
<div class="sy" id="fb2"></div>
<div class="sy" id="fb3"></div>
</div>
<div class="boxfoot">
</div>
</div>
</li>
<li>
<div class="bar">
<div class="barbox">
<ul class="clearfix">
<li class="pulll_left counter " id="total_pv">12581189</li>
<li class="pulll_left counter" id="total_income">3912410</li>
</ul>
</div>
<div class="barbox2">
<ul class="clearfix">
<li class="pulll_left">总阅读量（pv）</li>
<li class="pulll_left">总收益</li>
</ul>
</div>
</div>
<div class="map">
<div class="map1"><img src="picture/lbx.png"></div>
<div class="map2"><img src="picture/jt.png"></div>
<div class="map3"><img src="picture/map.png"></div>
<div class="map4" id="map_1"></div>
</div>
</li>
<li>
<div class="boxall" style="height:3.4rem">
<div class="alltitle">终端设备分布</div>
<div class="allnav" id="echart4"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">频道访问量Top5</div>
<div class="allnav" id="echart5"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3rem">
<div class="alltitle">点赞量Top5</div>
<div class="allnav" id="echart6"></div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<div class="back"></div>
<script src="js/china.js" type="text/javascript"></script>
<script src="js/area_echarts.js" type="text/javascript"></script>
</body>
</html>
2. Código js frontal
function echarts_1() {
var myChart = echarts.init(document.getElementById('echart1'));
option = {
title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
left: 'left',
// data: echarts_data
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: echarts_series_data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}3. Código Java de back-end
@RestController
@RequestMapping("/json")
public class Process {
@RequestMapping("/{filename}")
public String json(@PathVariable("filename") String filename) throws Exception {
System.out.println(filename);
ChangeJSON(filename);
String jsonStr = readJSON(filename);
System.out.println(jsonStr);
return jsonStr;
}4. Comunicación de datos JSON
[{"name": "直接访问", "value": 293}, {"name": "邮件营销", "value": 396}, {"name": "联盟广告", "value": 311}]5. Descripción de la estructura del código
a. Camino estático
B. Directorio de Java
C. Configuración del puerto
4. Operación del proyecto
1. Comando de inicio
2. Descripción Léame del proyecto
<!-- 启动server文件 -->
BigscreenApplication.java
<!-- 浏览器中输入网址查看大屏（端口为 application.properties 中的 server.port 值） -->
http://localhost:80xx
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流Five, descarga del código fuente
1 [Código fuente] Visualización de datos: un ejemplo dinámico en pantalla grande en tiempo real basado en Echarts + Java SpringBoot - Internet Enterprise Data Analysis
Resumen de casos maravillosos
Visualización de datos de YYDatav "Resumen de casos maravillosos"_Blog de YYDataV - Blog de CSDN
Este intercambio ha terminado, ¡bienvenido a discutir! QQ WeChat mismo número: 6550523