基于 SpringBoot + Echarts 实现的动态实时大屏
来源:https://yydatav.blog.csdn.net/?type=blog
效果图展示
一、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比,F11全屏显示。
2、部署方式
基于免安装可执行程序:支持Windows、Linux、Mac等各种操作系统;将程序复制到服务器上即可,无需其它环境依赖;
观看方式:既可在服务器上直接观看程序界面,也可在远程用浏览器打开播放,例如Chrome浏览器、360浏览器等。
二、整体架构设计
前端基于Echarts开源库设计,使用WebStorm编辑器; 后端基于Java Web实现,使用 IDEA 编辑器; 数据传输格式:JSON; 数据源类型:目前采用JSON文件方式,自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite,自行添加POI可支持Excel表格等,还可以定制HTTP API接口方式。
数据更新方式:采用http get 轮询方式 。在实际应用中,也可以视情况选择j监测后端数据实时更新,实时推送到前端的方式;
三、编码实现 (关键代码)
1、前端html代码 - 页面布局layout&样式style
<divclass="container_fluid">
<!-- 标题栏 -->
<divclass="row_fluid">
<divid="container_1"class="col-xs-12 col-md-12">
</div>
</div>
<!-- 上栏 -->
<divclass="row_fluid">
<!-- 上左栏 -->
<divid="container_2"class="col-xs-12 col-md-4">
<divid="container_2_1"class="col-xs-12 col-md-6">
</div>
<divid="container_2_2"class="col-xs-12 col-md-6">
</div>
<divid="container_2_3"class="col-xs-12 col-md-12">
</div>
</div>
<!-- 上中栏 -->
<divid="container_3"class="col-xs-12 col-md-4">
<iframesrc="myimg/video.mp4"scrolling="no"border=0frameborder="no"framespacing=0
allowfullscreen="true"width="100%"height="100%"></iframe>
</div>
<!-- 上右栏 -->
<divid="container_4"class="col-xs-12 col-md-4">
<divid="container_4_1"class="col-xs-12 col-md-3">
</div>
<divid="container_4_2"class="col-xs-12 col-md-3">
</div>
<divid="container_4_3"class="col-xs-12 col-md-3">
</div>
<divid="container_4_4"class="col-xs-12 col-md-3">
</div>
<divid="container_4_5"class="col-xs-12 col-md-6">
</div>
<divid="container_4_6"class="col-xs-12 col-md-6">
</div>
</div>
</div>
</div>
<!-- 下栏 -->
<divclass="row_fluid">
<!-- 下左栏 -->
<divid="container_5"class="col-xs-12 col-md-4">
<divid="container_5_1"class="col-xs-12 col-md-12">
</div>
<divid="container_5_2"class="col-xs-12 col-md-12">
</div>
</div>
<!-- 下中栏 -->
<divid="container_6"class="col-xs-12 col-md-4">
</div>
<!-- 下右栏 -->
<divclass="col-xs-12 col-md-4">
<divid="container_7"class="row_fluid">
<divid="container_7_1"class="col-xs-12 col-md-6">
</div>
<divid="container_7_2"class="col-xs-12 col-md-6">
</div>
<divid="container_7_3"class="col-xs-12 col-md-12">
</div>
</div>
</div>
</div>
2、前端JS代码 - 各个echarts图表
varidContainer_4_5 = "container_4_5";
functioninitEchart_4_5() {
基于准备好的dom,初始化echarts实例
varmyChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
option = {
title: {
text: "年龄分布",
top: "10%",
left: "center",
textStyle: {
color: "#17c0ff",
fontSize: "12",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function (p) {
//其中p为当前鼠标的位置
return[p[0] + 10, p[1] - 10];
},
},
grid: {
left: "0",
right: "10",
bottom: "25%",
top: "20%",
containLabel: true,
},
xAxis: {
type: "category",
data: [],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
yAxis: {
type: "value",
data: [],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
name: "年龄分布",
type: "bar",
stack: "total",
label: {
show: true,
},
},
],
};
使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function () {
myChart.resize();
});
}
functiongetKeys(dataList) {
varkeys = [];
varlen = dataList.length;
for(var i = 0; i < len; i++) keys.push(dataList[i].name);
returnkeys;
}
functionasyncData_4_5() {
(data) {
varmyChart = echarts.init(document.getElementById(idContainer_4_5));
myChart.setOption({
xAxis: { data: getKeys(data) },
series: [{ data: data }],
});
//end $.getJSON
}
initEchart_4_5();
3、后端Java代码
publicclassProcess{
public String json( String filename) throws Exception {
System.out.println(filename);
ChangeJSON(filename);
String jsonStr = readJSON(filename);
System.out.println(jsonStr);
return jsonStr;
}
4、数据通信 JSON
[{"name": "<18", "value": 2962}, {"name": "18-23", "value": 3119}, {"name": "24-30", "value": 2562}, {"name": "31-40", "value": 1024}, {"name": "41-50", "value": 2791}, {"name": ">50", "value": 4073}]
四、开发配置&代码结构说明
1、Java开发环境配置
然后GENERATE,下载包即可。
2、json库配置
使用alibaba的json库,pom.xml文件增加配置:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>
3、代码结构说明
a、静态路径
b、Java 目录
c、端口配置
4、启动命令
5、浏览器查看
阅读原文浏览器中输入网址查看大屏(端口为 application.properties 中的 server.port 值)
http://localhost:80xx
关键词
浏览器
前端
方式
大屏
动态
最新评论
推荐文章
作者最新文章
你可能感兴趣的文章
Copyright Disclaimer: The copyright of contents (including texts, images, videos and audios) posted above belong to the User who shared or the third-party website which the User shared from. If you found your copyright have been infringed, please send a DMCA takedown notice to [email protected]. For more detail of the source, please click on the button "Read Original Post" below. For other communications, please send to [email protected].
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。