El surgimiento de la visualización de datos en pantalla grande ha desatado una ola tras otra, y muchos dueños de negocios han querido construir su propia cabina de mando de pantalla grande del presidente dominante con un "cielo fresco".
Algunos 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" , con la esperanza de ayudar a los necesitados.
portal
Espectáculo de representaciones
1. Determinar el plan de demanda
1. Determinar la resolución de LED de pantalla para la implementación en línea del producto
Este caso se basa en una relación de aspecto de 16:9, visualización de pantalla completa F11.
2. 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 utiliza el archivo JSON. Agregar Mybatis usted mismo puede admitir PostgreSQL, MySQL, Oracle, Microsoft SQL Server y SQLite. Agregar Pandas usted mismo puede admitir tablas de Excel, etc. También puede personalizar el método de interfaz API HTTP.
- 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. Implementación de codificación (código clave)
1. Código html front-end: diseño y estilo de diseño de página
<body style="background-color:rgba(10, 2, 39, 0.796)">
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div class="col-xs-12 col-md-12" style="padding:0 0;">
<h3 style="color:rgba(11, 240, 125, 0.796); text-align: center" id="container_0">
<strong></strong>
</h3>
<dv-decoration-5 style="width=100%;height:4%;">
</dv-decoration-5>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:0%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>实时步数
<img src="myimg/1.png" style="height: 25%; ">
</p>
<p id="container_1"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>心率
<img src="myimg/2.png" style="height: 25%; ">
</p>
<p id="container_2"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>
血氧饱和度
<img src="myimg/3.png" style="height: 25%; ">
</p>
<p id="container_3"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>压力
<img src="myimg/4.png" style="height: 25%; ">
</p>
<p id="container_4"
style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-5" style="padding:0 0;">
<div style="height:75%;" id="container_5"></div>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_6">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_7">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_8">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_9">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_10">
</div>
</dv-border-box-6>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-6>
<div style="padding:3%; height:100%" id="container_11">
</div>
</dv-border-box-6>
</div>
</div>
</div>
</body>2. Código JS front-end - cada gráfico de echarts
var idContainer_5 = "container_5";
var chartDom = document.getElementById(idContainer_5);
var myChart = echarts.init(chartDom, gTheme);
option = {
title: {
text: "运动卡路里等级",
left: "left",
textStyle: {
color: "rgba(11, 240, 125, 0.796)",
fontSize: "12",
},
},
series: {
type: "sunburst",
data: [],
radius: [3, "90%"],
itemStyle: {
borderRadius: 15,
borderWidth: 1,
borderColor: "rgba(255,255,255,.1)",
},
label: {
textStyle:{
color: "rgba(0,0,0,.8)",
}
},
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
function asyncData_5() {
$.getJSON("json/sunburst.json").done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer_5));
myChart.setOption({
series: [{ data: data }],
});
}); //end $.getJSON
}
asyncData_5();
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": "有氧", "children": [{"name": "球类", "children": [{"name": "羽毛球", "value": 32}, {"name": "乒乓球", "value": 39}, {"name": "篮球", "value": 40}, {"name": "足球", "value": 48}, {"name": "网球", "value": 42}, {"name": "排球", "value": 46}, {"name": "冰球", "value": 24}, {"name": "棒球", "value": 33}, {"name": "橄榄球", "value": 12}, {"name": "板球", "value": 34}]}, {"name": "田径类", "children": [{"name": "马拉松", "value": 43}, {"name": "竞走", "value": 12}, {"name": "快跑", "value": 31}]}]}, {"name": "无氧", "children": [{"name": "竞技类", "children": [{"name": "赛跑", "value": 14}, {"name": "跳远", "value": 47}]}, {"name": "其他", "children": [{"name": "深蹲", "value": 29}, {"name": "举重", "value": 46}, {"name": "平板支撑", "value": 23}, {"name": "拔河", "value": 11}, {"name": "投掷", "value": 35}]}]}]Cuarto, configuración de desarrollo y descripción de la estructura del código.
5. Más casos
Este intercambio ha terminado, ¡bienvenido a discutir! QQ WeChat mismo número: 6550523