content
1. First look at the dynamic renderings
2. Look at the real-time fragmentation data graph
1. Determine the screen LED resolution for the online deployment of the product
2. Overall architecture design
3. Building the development environment
1. Java development environment configuration
Fourth, coding implementation (key code)
The emergence of large-screen data visualization has set off a wave after another, and many business owners have wanted to build their own "cool and dazzling" large-screen cockpit of the overbearing president. What I share with you today is [Internet Enterprise Data Analysis] .
Before, my friends suggested that I take some video courses to learn Echarts, so that I can get started faster, so I recorded "Echarts - 0 Basic Introduction Course" Echarts-0 Basic Introduction - Other Video Tutorials - Programming Language -CSDN Programmer Training Institute .
Show results
1. First look at the dynamic renderings
2. Look at the real-time fragmentation data graph
1. Confirmation of needs
1. Determine the screen LED resolution for the online deployment of the product
1920px*1080px, full screen after F11 full screen and no scroll bar. Other resolutions can also be adapted.
2. Functional modules
- User access source analysis (pie chart): including search engines, affiliate advertising, direct access
- Distribution of visited areas (bar chart + map + heat map): Zhejiang, Shanghai, Guangdong, Beijing
- Age distribution (pie chart): 0+, 20-29, 30-39, 40-49, 50+
- Occupational distribution (pie chart): e-commerce, education, IT/Internet, finance, students, others
- Interest distribution (pie chart): Auto, Travel, Finance, Education, Software, Others
- Terminal device distribution (line graph): Android + iOS mobile device usage
- Top 5 Channel Visits (Bar Chart): Display the latest Top 5 channels in real time
- Likes Top5 (pie chart): Real-time display of the latest Top5 regions
3. Deployment method
Install-free executable program: support Windows, Linux, Mac and other operating systems; just copy the program to the server without other environment dependencies;
Viewing method: You can watch the program interface directly on the server, or you can open and play remotely with a browser, such as Chrome browser, 360 browser, etc.
2. Overall architecture design
- The front end is designed based on the Echarts open source library and uses the WebStorm editor;
- The backend is implemented based on Java Web, using IDEA editor;
- Data transmission format: JSON;
- Data source type: PostgreSQL, MySQL, Oracle, Microsoft SQL Server, SQLite, Excel form, etc. are currently supported, and HTTP API interface or other types of databases can also be customized.
- Data update method: use http get polling method . In practical applications, you can also choose to monitor the real-time update of the back-end data and push it to the front-end in real time according to the situation;
3. Building the development environment
1. Java development environment configuration
Then GENERATE, download the package.
2. json library configuration
Using alibaba's json library, add configuration to the pom.xml file:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>Fourth, coding implementation (key code)
1. Front-end html code
<!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. Front-end js code
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. Back-end Java code
@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. Data communication JSON
[{"name": "直接访问", "value": 293}, {"name": "邮件营销", "value": 396}, {"name": "联盟广告", "value": 311}]5. Code structure description
a. Static path
b. Java directory
c. Port configuration
4. Project operation
1. Start command
2. Project ReadMe description
<!-- 启动server文件 -->
BigscreenApplication.java
<!-- 浏览器中输入网址查看大屏（端口为 application.properties 中的 server.port 值） -->
http://localhost:80xx
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流Five, source code download
1 [Source code] Data visualization: a dynamic real-time large-screen example based on Echarts + Java SpringBoot - Internet Enterprise Data Analysis
Summary of wonderful cases
YYDatav's Data Visualization "Summary of Wonderful Cases"_YYDataV's Blog - CSDN Blog
This sharing is over, welcome to discuss! QQ WeChat same number: 6550523