700字范文 > 2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据

2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据

时间：2020-11-30 19:47:52

数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》，希望可以帮到有需要的小伙伴。

传送门

YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码）_YYDataV的博客-CSDN博客

2【源码】数据可视化：基于Echarts+JavaSpringBoot实现的动态实时大屏范例-物流大数据-企业管理文档类资源-CSDN下载

效果展示

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1920px*1080px，15: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 轮询方式。在实际应用中，也可以视情况选择监测后端数据实时更新，实时推送到前端的方式；

三、编码实现（关键代码）

1、前端html代码

<div class="loading"><div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div></div><div class="head"><h1>案例 - 物流大数据服务平台</h1><div class="weather"><span id="showTime"></span></div><script>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.1rem"><div class="main_title"><img alt="" src="img/t_1.png">湖南货物收入</div><div class="allnav" id="echart_1"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.15rem"><div class="main_title">湖南省地图<img alt="" src="img/t_2.png"></div><div class="allnav" id="echart_2"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.1rem" ><div class="main_title"><img alt="" src="img/t_7.png">湖南省交通</div><div class="main_table t_btn8"><table id="table_1"><thead><tr><th>运营数(辆)</th><th>线路总长度(公里)</th><th>客运总量(万人次)</th><th>日期</th></tr></thead><tbody><tr><td>21059</td><td>26497</td><td>184448</td><td></td></tr><tr><td>18777</td><td>21140</td><td>188808</td><td></td></tr><tr><td>15757</td><td>5</td><td>43</td><td></td></tr><tr><td>17458</td><td>19567</td><td>202446</td><td></td></tr><tr><td>11323</td><td>14562</td><td>279854</td><td></td></tr></tbody></table></div><div class="boxfoot"></div></div></li><li><div class="boxall" style="height: 6.5rem"><div class="main_title">全国地图<img alt="" src="img/t_map.png"></div><div class="map4" id="echart_map" ></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.1rem" ><div class="main_title" ><img alt="" src="img/t_7.png">湖南省业务量</div><div class="main_table t_btn8"><table id="table_2"><thead><tr><th>运营数(辆)</th><th>线路总长度(公里)</th><th>客运总量(万人次)</th><th>日期</th></tr></thead><tbody><tr><td>21059</td><td>26497</td><td>184448</td><td></td></tr><tr><td>18777</td><td>21140</td><td>188808</td><td></td></tr><tr><td>15757</td><td>5</td><td>43</td><td></td></tr><tr><td>17458</td><td>19567</td><td>202446</td><td></td></tr><tr><td>11323</td><td>14562</td><td>279854</td><td></td></tr></tbody></table></div><div class="boxfoot"></div></div></li><li><div class="boxall" style="height:3.1rem"><div class="main_title"><img alt="" src="img/t_4.png">货物周转量</div><div class="allnav" id="echart_3"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.15rem"><div class="main_title"> <img alt="" src="img/t_5.png">湖南高速公路</div><div class="allnav" id="echart_4"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.1rem"><div class="main_title"><img alt="" src="img/t_6.png">湖南省飞机场</div><div class="allnav" id="echart_5"></div><div class="boxfoot"></div></div></li></ul></div><div class="back"></div>

2、前端JS代码

//echart_1湖南货物收入function echart_1() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('echart_1'));option = {//鼠标缩放和平移roam: true,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c}万元"},legend: {x: 'center',y: '15%',data: ['张家口', '承德', '衡水', '邢台', '邯郸', '保定', '秦皇岛', '石家庄', '唐山'],icon: 'circle',textStyle: {color: '#fff',}},calculable: true,series: [{name: '',type: 'pie',//起始角度，支持范围[0, 360]startAngle: 0,//饼图的半径，数组的第一项是内半径，第二项是外半径radius: [41, 100.75],//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度center: ['50%', '40%'],//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：// 'radius' 面积展现数据的百分比，半径展现数据的大小。// 'area' 所有扇区面积相同，仅通过半径展现数据大小roseType: 'area',//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。avoidLabelOverlap: false,label: {normal: {show: true,formatter: '{c}万元'},emphasis: {show: true}},labelLine: {normal: {show: true,length2: 1,},emphasis: {show: true}},data: chart_1_data}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}

3、后端Java代码

@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、数据通信 JSON

[{"value": 285,"name": "张家口","itemStyle": {"normal": {"color": "#f845f1"}}},{"value": 662,"name": "承德","itemStyle": {"normal": {"color": "#ad46f3"}}},{"value": 2826,"name": "衡水","itemStyle": {"normal": {"color": "#5045f6"}}},{"value": 599,"name": "邢台","itemStyle": {"normal": {"color": "#4777f5"}}},{"value": 2502,"name": "邯郸","itemStyle": {"normal": {"color": "#44aff0"}}},{"value": 984,"name": "保定","itemStyle": {"normal": {"color": "#45dbf7"}}},{"value": 582,"name": "秦皇岛","itemStyle": {"normal": {"color": "#f6d54a"}}},{"value": 2324,"name": "石家庄","itemStyle": {"normal": {"color": "#f69846"}}},{"value": 2060,"name": "唐山","itemStyle": {"normal": {"color": "#ff4343"}}},{"value": 893,"name": "","itemStyle": {"normal": {"color": "transparent"}},"label": {"show": false},"labelLine": {"show": false}}]