1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 |
您所在的位置：网站首页 › it项目管理平台可视化大屏 › 1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 |
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例
|
目录 效果展示 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、再看实时分片数据图
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文件增加配置： com.alibaba fastjson 1.2.51 四、编码实现 （关键代码） 1、前端html代码 index $(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}) }); }); 页面加载中...
大数据可视化展板 —— 互联网企业数据分析
//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); //设定定时器，循环运行
}
用户访问来源
访问地区分布
12581189
3912410
总阅读量（pv）
总收益
终端设备分布
频道访问量Top5
点赞量Top5
2、前端js代码
function echarts_1() {
var myChart = echarts.init(document.getElementById('echart1'));
option = {
title: {
// text: '某站点用户访问来源',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} {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、静态路径
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析 https://download.csdn.net/download/lildkdkdkjf/84998356 精彩案例汇总YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客 《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客 本次分享结束，欢迎讨论！QQ微信同号： 6550523 |
【本文地址】
今日新闻 |
推荐新闻 |