Full-Stack Dashboard Implementation Using Echarts, Java Web Backend, and JSON Data

1. Requirement Analysis The dashboard is designed for a 16:9 LED screen with full‑screen display (F11). Deployment uses a portable executable supporting Windows, Linux, macOS, requiring only file copy to the server.

2. Overall Architecture The front end uses the open‑source Echarts library edited with WebStorm; the back end is a Java Web application built in IntelliJ IDEA. Data exchange format is JSON. Data sources can be JSON files, MyBatis‑connected databases (PostgreSQL, MySQL, Oracle, SQL Server, SQLite), POI for Excel, or custom HTTP APIs. Data updates are performed via HTTP GET polling, with optional real‑time push.

3. Front‑End Implementation The HTML layout defines a fluid container with rows and columns (Bootstrap‑style classes) for title, top, and bottom sections, including an <iframe> for video playback. The JavaScript initializes Echarts instances, configures titles, tooltips, axes, and series, loads data from JSON files, and handles window resize events.

<div class="container_fluid">
    <!-- 标题栏 -->
    <div class="row_fluid">
        <div id="container_1" class="col-xs-12 col-md-12">
        </div>
    </div>
    <!-- 上栏 -->
    <div class="row_fluid">
        <!-- 上左栏 -->
        <div id="container_2" class="col-xs-12 col-md-4">
            <div id="container_2_1" class="col-xs-12 col-md-6"></div>
            <div id="container_2_2" class="col-xs-12 col-md-6"></div>
            <div id="container_2_3" class="col-xs-12 col-md-12"></div>
        </div>
        <!-- 上中栏 -->
        <div id="container_3" class="col-xs-12 col-md-4">
            <iframe src="myimg/video.mp4" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%"></iframe>
        </div>
        <!-- 上右栏 -->
        <div id="container_4" class="col-xs-12 col-md-4">
            <div id="container_4_1" class="col-xs-12 col-md-3"></div>
            <div id="container_4_2" class="col-xs-12 col-md-3"></div>
            <div id="container_4_3" class="col-xs-12 col-md-3"></div>
            <div id="container_4_4" class="col-xs-12 col-md-3"></div>
            <div id="container_4_5" class="col-xs-12 col-md-6"></div>
            <div id="container_4_6" class="col-xs-12 col-md-6"></div>
        </div>
    </div>
    <!-- 下栏 -->
    <div class="row_fluid">
        <!-- 下左栏 -->
        <div id="container_5" class="col-xs-12 col-md-4">
            <div id="container_5_1" class="col-xs-12 col-md-12"></div>
            <div id="container_5_2" class="col-xs-12 col-md-12"></div>
        </div>
        <!-- 下中栏 -->
        <div id="container_6" class="col-xs-12 col-md-4"></div>
        <!-- 下右栏 -->
        <div class="col-xs-12 col-md-4">
            <div id="container_7" class="row_fluid">
                <div id="container_7_1" class="col-xs-12 col-md-6"></div>
                <div id="container_7_2" class="col-xs-12 col-md-6"></div>
                <div id="container_7_3" class="col-xs-12 col-md-12"></div>
            </div>
        </div>
    </div>
</div>

var idContainer_4_5 = "container_4_5";
function initEchart_4_5() {
  // 基于准备好的 dom，初始化 echarts 实例
  var myChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
  option = {
    title: {
      text: "年龄分布",
      top: "10%",
      left: "center",
      textStyle: { color: "#17c0ff", fontSize: "12" }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) { return [p[0] + 10, p[1] - 10]; }
    },
    grid: { left: "0", right: "10", bottom: "25%", top: "20%", containLabel: true },
    xAxis: { type: "category", data: [], axisLabel: { textStyle: { color: "rgba(255,255,255,.8)", fontSize: 10 } }, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } },
    yAxis: { type: "value", data: [], axisLabel: { textStyle: { color: "rgba(255,255,255,.8)", 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 } }]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () { myChart.resize(); });
}
function getKeys(dataList) { var keys = []; var len = dataList.length; for (var i = 0; i < len; i++) keys.push(dataList[i].name); return keys; }
function asyncData_4_5() {
  $.getJSON("myjson/bar_age.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_4_5));
    myChart.setOption({ xAxis: { data: getKeys(data) }, series: [{ data: data }] });
  });
}
initEchart_4_5();

4. Back‑End Implementation A Spring‑style REST controller provides JSON data via a @RestController with a @RequestMapping("/json") endpoint that reads a file and returns its contents.

@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;
    }
}

5. Sample JSON Data The age distribution data is represented as an array of objects with name and value fields.

[
  {"name":"<18","value":2962},
  {"name":"18-23","value":3119},
  {"name":"24-30","value":2562},
  {"name":"31-40","value":1024},
  {"name":"41-50","value":2791},
  {"name":">50","value":4073}
]

6. Configuration and Build The Java environment is set up in IntelliJ IDEA; the Alibaba FastJSON library is added via Maven dependency. After generating the project package, the application can be started, and the dashboard accessed in a browser at http://localhost:80xx (port defined in application.properties).

<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>fastjson</artifactId>
   <version>1.2.51</version>
</dependency>