目录
效果展示
1、首先看动态效果图
2、再看实时分片数据图
一、需求确认
1、确定产品上线部署的屏幕LED分辨率
2、功能模块
3、部署方式
二、整体架构设计
三、开发环境搭建
1、Java开发环境配置
2、json库配置
四、编码实现 （关键代码）
1、前端html代码
2、前端js代码
3、后端Java代码
4、数据通信 JSON
5、代码结构说明
a、静态路径
b、Java 目录
c、端口配置
四、项目运行
1、启动命令
2、项目 ReadMe 说明
五、源码下载
精彩案例汇总
数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是【互联网企业数据分析】。
之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院。
效果展示
1、首先看动态效果图
2、再看实时分片数据图
一、需求确认
1、确定产品上线部署的屏幕LED分辨率
1920px*1080px，F11全屏后占满整屏且无滚动条。其它分辨率也可自适应。
2、功能模块
用户访问来源分析（饼图）:包括搜索引擎，联盟广告，直接访问访问地区分布（柱状图 + 地图 + 热力图）：浙江、上海、广东、北京年龄分布（饼图）：0岁以上、20-29岁、30-39岁、40-49岁、50岁以上职业分布（饼图）：电子商务、教育、IT/互联网、金融、学生、其他兴趣分布（饼图）：汽车、旅游、财经、教育、软件、其他终端设备分布（线图）：Android + iOS移动端设备使用量频道访问量Top5（柱状图）：实时显示最新Top5频道点赞量Top5（饼图）:实时显示最新Top5地区3、部署方式
基于免安装可执行程序：支持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、Java开发环境配
然后GENERATE，下载包即可。
2、json库配置
使用alibaba的json库，pom.xml文件增加配置：
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.51</version></dependency>
四、编码实现 （关键代码）
1、前端html代码
<!doctype html><html><head><meta charset="utf-8"><meta content="*" http-equiv="Access-Control-Allow-Origin"/><title>index</title><script src="js/jquery.js" type="text/javascript"></script><link href="css/comon0.css" rel="stylesheet"></head><script>$(window).load(function () {$(".loading").fadeOut()})/****/$(document).ready(function () {var whei = $(window).width()$("html").css({fontSize: whei / 20})$(window).resize(function () {var whei = $(window).width()$("html").css({fontSize: whei / 20})});});</script><script src="js/echarts.min.js" type="text/javascript"></script><script language="JavaScript" src="js/js.js"></script><body><div class="canvas" style="opacity: .2"><iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe></div><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>//alert("aaaaaa");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.2rem"><div class="alltitle">用户访问来源</div><div class="allnav" id="echart1"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.2rem"><div class="alltitle">访问地区分布</div><div class="allnav" id="echart2"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.2rem"><div style="height:100%; width: 100%;"><div class="sy" id="fb1"></div><div class="sy" id="fb2"></div><div class="sy" id="fb3"></div></div><div class="boxfoot"></div></div></li><li><div class="bar"><div class="barbox"><ul class="clearfix"><li class="pulll_left counter " id="total_pv">12581189</li><li class="pulll_left counter" id="total_income">3912410</li></ul></div><div class="barbox2"><ul class="clearfix"><li class="pulll_left">总阅读量（pv）</li><li class="pulll_left">总收益</li></ul></div></div><div class="map"><div class="map1"><img src="picture/lbx.png"></div><div class="map2"><img src="picture/jt.png"></div><div class="map3"><img src="picture/map.png"></div><div class="map4" id="map_1"></div></div></li><li><div class="boxall" style="height:3.4rem"><div class="alltitle">终端设备分布</div><div class="allnav" id="echart4"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3.2rem"><div class="alltitle">频道访问量Top5</div><div class="allnav" id="echart5"></div><div class="boxfoot"></div></div><div class="boxall" style="height: 3rem"><div class="alltitle">点赞量Top5</div><div class="allnav" id="echart6"></div><div class="boxfoot"></div></div></li></ul></div><div class="back"></div><script src="js/china.js" type="text/javascript"></script><script src="js/area_echarts.js" type="text/javascript"></script></body></html>
2、前端js代码
function echarts_1() {var myChart = echarts.init(document.getElementById('echart1'));option = {title: {// text: '某站点用户访问来源',// subtext: '纯属虚构',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {// orient: 'vertical',left: 'left',// data: echarts_data},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: echarts_series_data,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。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
[{"name": "直接访问", "value": 293}, {"name": "邮件营销", "value": 396}, {"name": "联盟广告", "value": 311}]
5、代码结构说明
a、静态路径
b、Java 目录
c、端口配置
四、项目运行
1、启动命令
2、项目 ReadMe 说明
<!-- 启动server文件 -->BigscreenApplication.java<!-- 浏览器中输入网址查看大屏（端口为 application.properties 中的 server.port 值） -->http://localhost:80xx <!-- 更多资料参考我的博客主页 -->https://yydatav./<!-- 更多案例参考 -->/lildkdkdkjf/article/details/120705616我的微信号：6550523 欢迎多多交流
五、源码下载
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
/download/lildkdkdkjf/84998356
精彩案例汇总
YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客
《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客
本次分享结束，欢迎讨论！QQ微信同号： 6550523
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
