0
0

11【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 销售指标大屏

之前有小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》，希望对有需要的小伙伴有帮助。

传送门

YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码）_YYDataV的博客-CSDN博客

11【源码】数据可视化：基于Echarts+JavaSpringBoot实现的动态实时大屏范例-销售指标.zip-Java文档类资源-CSDN下载

效果图展示

​

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

本案例基于16:9 屏宽比，F11全屏显示。

*2、***部署方式 **

基于免安装可执行程序：支持Windows、Linux、Mac等各种操作系统；将程序复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如Chrome浏览器、360浏览器等。

二、整体架构设计

  1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
  2. 后端基于Java Web实现，使用 IDEA 编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：目前采用JSON文件方式，自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加Pandas可支持Excel表格等，还可以定制HTTP API接口方式。
  5. *数据更新方式：***采用http get 轮询方式 **。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；

三、编码实现 （关键代码）

1、前端html代码 - 页面布局layout&样式style

 
<body background="/myimg/starfield.jpg" style="color: rgb(230, 171, 84);">

      <div class="container_fluid">
            <div class="row_fluid" id="vue_app">
                  <div style="padding:0 0" class="col-xs-12 col-md-12">
                        <dv-decoration-1 style="height:4%;">
                        </dv-decoration-1>
                        <h3 id="container_h"></h3>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-1 style="height:29%;padding:0 0">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_0_0"
                                    class="col-xs-12 col-md-6"></div>
                              <div style="height:100%;padding:5% 5% 5% 5%; " id="container_0_1"
                                    class="col-xs-12 col-md-6"></div>
                        </dv-border-box-1>

                        <dv-border-box-1 style="height:29%;padding:0 0">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"
                                    class="col-xs-12 col-md-12"></div>
                        </dv-border-box-1>

                        <dv-border-box-1 style="height:29%;padding:0 0">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"
                                    class="col-xs-12 col-md-12"></div>
                        </dv-border-box-1>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-6">
                        <dv-border-box-1 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div>

                              <div style="position: absolute; z-index: 2; left:25%; top:10%; right: 25%; bottom: 20%; height:20%; width: 50%;  ">
                                    <h3 id="container_3_top_title"> </h3>
                                    <h1 id="container_3_top"></h1>
                              </div>

                        </dv-border-box-1>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-1 style="height:29%;padding:0 0">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_4_0"
                                    class="col-xs-12 col-md-6"></div>
                              <div style="height:100%;padding:5% 5% 5% 5%; " id="container_4_1"
                                    class="col-xs-12 col-md-6"></div>
                        </dv-border-box-1>

                        <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_5"></div>
                        </dv-border-box-1>

                        <dv-border-box-1 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_6"></div>
                        </dv-border-box-1>
                  </div>

            </div>
      </div>
</body>

2、前端JS代码 - 各个echarts图表

 // import * as echarts from 'echarts';
var idContainer_1 = "container_1";
var chartDom = document.getElementById(idContainer_1);

function initEchart_1(){
  var myChart = echarts.init(chartDom, window.gTheme);
  var option = {
    title: {
      text: "产品销量分析",
      left: "left",
      textStyle: {
        color: "#3690be",
        fontSize: "10",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} 百万",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
    legend: {
      data: ["成本", "利润"],
      textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "10",
      },
      // 距离顶部边框的相对距离，太近压到了title
      top: "10%",
      // orient:"vertical"
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      // 距离顶部边框的相对距离，太近压到了legend
      top: "30%",
      containLabel: true,
    },
    xAxis: {
      name: '百万',
      type: "value",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      type: "category",
      data: ["Mate", "P", "Nova", "畅享"],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "成本",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [334, 390, 330, 320],
      },
      {
        name: "利润",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [134, 90, 230, 210],
      },
    ],
  };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
}

function asyncData_1() {
  $.getJSON("json/bar_stacked.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_1));

    myChart.setOption({
      series: [{ data: data }],
    });
  }); //end $.getJSON}
}
initEchart_1();
asyncData_1();

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": 63, "name": "达成"}]

[2665, 1087, 2221, 3117, 3593, 2739, 4504, 2703]

四、开发配置&代码结构说明

​数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏【Java开发环境搭建】

五、更多案例

YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

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

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

标签： 可视化大屏 数据可视化 大屏
本文转载自: https://blog.csdn.net/lildkdkdkjf/article/details/123851329
版权归原作者 YYDataV数据可视化 所有， 如有侵权，请联系我们删除。
登录后发布评论

“11【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 销售指标大屏”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

hadoop技术实验- 第4章 HBase 开发：使用Java操作HBase

智能对话微信前端小程序设计与开发

前端配置开发环境：新电脑配置前端开发环境，Vue开发环境配置的详细过程

SpringBoot集成MQTT服务器和客户端并通过WebSocket将消息实时发送到前端（本地搭建MQTT服务器）

idea | 搭建 SpringBoot 项目之配置 Maven

Python毕业设计选题：基于django+vue的全国民宿信息管理系统

文章导航