likes
comments
collection
share

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

作者站长头像
站长
· 阅读数 70

🏆本文收录于《Spring Boot从入门到精通》，专门攻坚指数提升。

本专栏致力打造最硬核 Spring Boot 从零基础到进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中…欢迎大家订阅持续学习。

环境说明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE

  1. 前言

  在前几期，我们重点学习了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础。接下来，我们介绍一下后端开发经常会遇到的一个场景：可视化图表。比如如下：

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

  通常啊，这类业务在客户端应用中不太能用到，但在后端的各种统计分析模块会经常碰到这类业务。比如展示：折线图、柱状图、饼图、雷达图等可视化展示形式，更直观的展现和分析经营状况或系统运行情况。这里我们将引入的数据可视化组件库ECharts来帮助我们完成这样的任务。

  那么，SpringBoot如何集成可视化组件库 ECharts来实现。这将又会是干货满满的一期，全程无尿点不废话只抓重点教，具有非常好的学习效果，拿好小板凳准备就坐！希望学习的过程中大家认真听好好学，学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信，bug菌将第一时间给予解惑，那么废话不多说，直接开整！Fighting！！ 

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

2 . 环境说明

本地的开发环境：

  • 开发工具：IDEA 2021.3
  • JDK版本： JDK 1.8
  • Spring Boot版本：2.3.1 RELEASE
  • Maven版本：3.8.2

3. ECharts简介

3.1 概念

  ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

3.2 特点

  1. 可视化类型丰富，并且提供了华丽的特效。
  2. 多渲染方案，能够跨平台使用，支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。
  3. 多维数据的支持以及丰富的视觉编码手段，例如对于传统散点图等，传入的数据也可以是多个维度的。
  4. 多种数据格式无需转换直接使用，内置的 dataset 属性(4.0+)支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
  5. 无障碍访问（4.0+），能够支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问!

3.3 官网

  大家可以去它的官网瞅瞅，各式各样的Echarts图例。

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

官方网站：Apache ECharts

图表示例：Examples - Apache ECharts

4. 集成Echarts🔥

  接下来，我就来教大家如何在项目中引入其Echarts图表。 并且会达到能访问地址有图表完整展示效果，同学们可得好好听，认真学。

4.1 引入依赖

  这里需要引入web模块和模板引擎thymeleaf模块，这里我们静态模板就用Thymeleaf。

            <!--web依赖-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            
            <!--Thymeleaf 静态模板-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

4.2 创建Controller类

  这里我们定义一个Controller，将/路径的请求，映射到 eCharts.js 页面。

    package com.example.demo.controller;

    import io.swagger.annotations.Api;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;

    @Controller
    @RequestMapping("/echarts")
    @Api(tags = "echarts图表演示", description = "echarts图表演示")
    public class EchartsController {

        @GetMapping("/basic-line")
        public String index() {
            return "eCharts";
        }

    }

  这里就不细讲为何是直接return 一个html 页面名了，懂得都懂。 

4.3 创建html静态页面

  这里我们创建一个静态html页面，命名为：eCharts.html.

  新建一个 echarts.html 文件，为 ECharts 准备一个具备大小（宽高）的 Dom。

    <div id="all" style="width: 1000px;height:400px;"></div>

  然后重点来了，我们需要引入我们需要展示的Echarts图表，比如，我们就拿Echarts官网第一个则线图来进行举例：

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

  我们只需要将其option图表设置 直接复制放进到 

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>SpringBoot使用ECharts图表演示</title>
        <script src="/js/echarts.min.js"></script>
    </head>
    <body>
    <div id="all" style="width: 1000px;height:400px;"></div>
    </body>

    <script type="text/javascript">
        // 初始化ECharts组件到id为main的元素上
        let myChart = echarts.init(document.getElementById('all'));
        // 定义图标的配置项
        let option = {
            title: {
                text: 'SpringBoot使用ECharts图表演示'
            },
            tooltip: {},
            // x轴配置
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            // y轴配置
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    // 数据集（也可以从后端的Controller中传入）
                    data: [150, 230, 224, 218, 135, 147, 260],
                    // 图表类型，这里使用line，为折线图
                    type: 'line'
                }
            ]
        };
        myChart.setOption(option);
    </script>
    </html>

解读一下如上代码：

1.<head>中通过<script>标签引入ECharts的组件JS，这里静态引入本地的，实现动静分离。

2.<body>中定义了一个id为all的<div>标签，这个标签后续将用来渲染EChart组件最后的一段。

3.<script>内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。

4.同如上点1，如果你直接引用bootcss的免费公共cdn，访问js时直接跨域导致无法正常引用。

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

  如果有遇到此类问题，建议到直接从官网将该静态资源下载引入到本地，比如：我是将echarts.min.js 存放在 resources/static/js/ 下，这样就实现了从本地访问，如果有不清楚的同学为何要将静态资源放置到static目录下，可以参考我写的这篇《Spring Boot之静态资源映射》，超级详细。目录截图展示如下：

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

  这里涉及到的 echarts.min.js  你们可以去我的 GitHub上自取，也可以从这个地址中直接另存为：cdn.bootcss.com/echarts/4.6…

4.4 启动访问

  这里我们直接进行路径地址访问：比如我的：http://localhost:8080/echarts/basic-line

  这个看大家具体项目路径设置，浏览器输入地址回车，如果上面操作均无差错，那我们就会得到下面的折线图：

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

5. 热文推荐

  若想学习更多，可以参考这篇专栏总结《2023最新首发，全网最全 Spring Boot 学习宝典(附思维导图)》，本专栏致力打造最硬核 Spring Boot 进阶系列学习内容，🚀均为全网独家首发，打造精品专栏，专栏持续更新中。欢迎大家订阅持续学习。

  在入门及进阶之途，我必助你一臂之力，系统性学习，从入门到精通，带你不走弯路，直奔终点；投资自己，永远性价比最高，都这么说了，你还不赶紧来学？？

本文涉及所有源代码，均已上传至github开源，供同学们一对一参考 GitHub传送门，

同时，原创开源不易，欢迎给个star🌟，想体验下被🌟的感jio，非常感谢❗

6. 文末

数据之美：用「SpringBoot+ECharts」打造炫酷的数据可视化世界！

转载自:https://juejin.cn/post/7277786940169404479
评论
请登录