1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析

YYDataV软件开发

已于 2022-04-13 10:02:40 修改

阅读量8.6k

点赞数 15

分类专栏：【可视化大屏案例Java&Echarts】【可视化大屏案例Python/Echarts】文章标签： echarts javascript java 数据可视化 JavaScript

于 2022-03-18 12:47:44 首次发布

本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/123571493

版权

【可视化大屏案例Python/Echarts】同时被 2 个专栏收录

73 篇文章 224 订阅

订阅专栏

【可视化大屏案例Java&Echarts】

19 篇文章 28 订阅

订阅专栏

目录

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.blog.csdn.net/

<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616

我的微信号：6550523  欢迎多多交流

五、源码下载

1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析

https://download.csdn.net/download/lildkdkdkjf/84998356

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

YYDataV软件开发

关注

15
点赞
踩
155

收藏

觉得还不错? 一键收藏
打赏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 8

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

YYDataV软件开发 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。