基于 SpringBoot + Echarts 實(shí)現(xiàn)的動(dòng)態(tài)實(shí)時(shí)大屏
來(lái)源：https://yydatav.blog.csdn.net/?type=blog
效果圖展示
一、 確定需求方案
1、確定產(chǎn)品上線部署的屏幕LED分辨率
2、部署方式
二、整體架構(gòu)設(shè)計(jì)
前端基于Echarts開(kāi)源庫(kù)設(shè)計(jì)，使用WebStorm編輯器；
后端基于Java Web實(shí)現(xiàn)，使用 IDEA 編輯器；
數(shù)據(jù)傳輸格式：JSON；
數(shù)據(jù)源類型：目前采用JSON文件方式，自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加POI可支持Excel表格等，還可以定制HTTP API接口方式。
數(shù)據(jù)更新方式：采用http get 輪詢方式 。在實(shí)際應(yīng)用中，也可以視情況選擇j監(jiān)測(cè)后端數(shù)據(jù)實(shí)時(shí)更新，實(shí)時(shí)推送到前端的方式；
三、編碼實(shí)現(xiàn) （關(guān)鍵代碼）
1、前端html代碼 - 頁(yè)面布局layout&樣式style
<div class="container_fluid"><!-- 標(biāo)題欄 --><div class="row_fluid"><div id="container_1" class="col-xs-12 col-md-12"></div></div><!-- 上欄 --><div class="row_fluid"><!-- 上左欄 --><div id="container_2" class="col-xs-12 col-md-4"><div id="container_2_1" class="col-xs-12 col-md-6"></div><div id="container_2_2" class="col-xs-12 col-md-6"></div><div id="container_2_3" class="col-xs-12 col-md-12"></div></div><!-- 上中欄 --><div id="container_3" class="col-xs-12 col-md-4"><iframe src="myimg/video.mp4" scrolling="no" border=0 frameborder="no" framespacing=0allowfullscreen="true" width="100%" height="100%"> </iframe></div><!-- 上右欄 --><div id="container_4" class="col-xs-12 col-md-4"><div id="container_4_1" class="col-xs-12 col-md-3"></div><div id="container_4_2" class="col-xs-12 col-md-3"></div><div id="container_4_3" class="col-xs-12 col-md-3"></div><div id="container_4_4" class="col-xs-12 col-md-3"></div><div id="container_4_5" class="col-xs-12 col-md-6"></div><div id="container_4_6" class="col-xs-12 col-md-6"></div></div></div></div><!-- 下欄 --><div class="row_fluid"><!-- 下左欄 --><div id="container_5" class="col-xs-12 col-md-4"><div id="container_5_1" class="col-xs-12 col-md-12"></div><div id="container_5_2" class="col-xs-12 col-md-12"></div></div><!-- 下中欄 --><div id="container_6" class="col-xs-12 col-md-4"></div><!-- 下右欄 --><div class="col-xs-12 col-md-4"><div id="container_7" class="row_fluid"><div id="container_7_1" class="col-xs-12 col-md-6"></div><div id="container_7_2" class="col-xs-12 col-md-6"></div><div id="container_7_3" class="col-xs-12 col-md-12"></div></div></div></div>
2、前端JS代碼 - 各個(gè)echarts圖表
var idContainer_4_5 = "container_4_5";function initEchart_4_5() {基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = 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/>: {c} (go7utgvlrp%)",position: function (p) {//其中p為當(dāng)前鼠標(biāo)的位置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,},},],};使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);function () {myChart.resize();});}function getKeys(dataList) {var keys = [];var len = dataList.length;for (var i = 0; i < len; i++) keys.push(dataList[i].name);return keys;}function asyncData_4_5() {(data) {var myChart = echarts.init(document.getElementById(idContainer_4_5));myChart.setOption({xAxis: { data: getKeys(data) },series: [{ data: data }],});//end $.getJSON}initEchart_4_5();
3、后端Java代碼
public class Process {public String json( String filename) throws Exception {System.out.println(filename);ChangeJSON(filename);String jsonStr = readJSON(filename);System.out.println(jsonStr);return jsonStr;}
4、數(shù)據(jù)通信 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}]四、開(kāi)發(fā)配置&代碼結(jié)構(gòu)說(shuō)明
1、Java開(kāi)發(fā)環(huán)境配置
2、json庫(kù)配置
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.51</version></dependency>
3、代碼結(jié)構(gòu)說(shuō)明
a、靜態(tài)路徑
b、Java 目錄
4、啟動(dòng)命令
5、瀏覽器查看
評(píng)論
圖片
表情