数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。
之前小伙伴们建议我出一些视频课程来学习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，自行添加Pandas可支持Excel表格等，还可以定制HTTP API接口方式。
- 数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三、编码实现 （关键代码）
1、前端html代码
<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>
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>2018年</td>
</tr>
<tr>
<td>18777</td>
<td>21140</td>
<td>188808</td>
<td>2017年</td>
</tr>
<tr>
<td>15757</td>
<td>20225</td>
<td>201143</td>
<td>2016年</td>
</tr>
<tr>
<td>17458</td>
<td>19567</td>
<td>202446</td>
<td>2015年</td>
</tr>
<tr>
<td>11323</td>
<td>14562</td>
<td>279854</td>
<td>2014年</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>2018年</td>
</tr>
<tr>
<td>18777</td>
<td>21140</td>
<td>188808</td>
<td>2017年</td>
</tr>
<tr>
<td>15757</td>
<td>20225</td>
<td>201143</td>
<td>2016年</td>
</tr>
<tr>
<td>17458</td>
<td>19567</td>
<td>202446</td>
<td>2015年</td>
</tr>
<tr>
<td>11323</td>
<td>14562</td>
<td>279854</td>
<td>2014年</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
}
}
]四、开发配置&代码结构说明
数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏【Java开发环境搭建】
五、更多资源
YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客
《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客
本次分享结束，欢迎讨论！QQ微信同号： 6550523