百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表

bigegpt 2024-10-20 04:24 2 浏览

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

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

ECharts简介

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

它提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

  • 官方网站：https://www.echartsjs.com/zh/index.html
  • 案例页面：https://www.echartsjs.com/examples/zh/index.html

动手试一试

第一步：创建一个基础Spring Boot应用，或者拿上一节的工程chapter4-1（仓库地址见文末）来进行加工。

第二步：在pom.xml中引入Web应用需要的web模块和模板引擎thymeleaf模块，比如用Thymeleaf的时候：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

第三步：编写一个Controller，将/路径的请求，映射到index.html页面

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(ModelMap map) {
        return "index";
    }

}

第四步：在resources/templates目录下创建index.html页面，具体内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>Spring Boot中使用ECharts</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body>

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

在页面内容中主要包含三部分：

  • <head>中通过<script>标签引入ECharts的组件JS，这里使用了bootcss的免费公共cdn。如果用于自己生产环境，不建议使用这类免费CDN的JS或者CSS等静态资源。可以从官网下载所需的静态内容，放到Spring Boot的静态资源位置（如果不知道在哪，可见上一篇），或是放到自己公司的静态资源管理的服务器上，实现动静分离。
  • <body>中定义了一个id为main的<div>标签，这个标签后续将用来渲染EChart组件
  • 最后的一段<script>内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。

第五步：启动应用，访问localhost:8080，如果上面操作均无差错，那我们就会得到类似下面的折线图：

关于ECharts图表的调试，官方还提供了一个在线工具，有兴趣的读者可以点击这里尝试一下。

更多本系列免费教程连载「点击进入汇总目录」

代码示例

本文的相关例子可以查看下面仓库中的chapter4-2目录：

  • Github：https://github.com/dyc87112/SpringBoot-Learning/
  • Gitee：https://gitee.com/didispace/SpringBoot-Learning/

如果您觉得本文不错，欢迎Star支持，您的关注是我坚持的动力！

相关推荐

Java 泛型大揭秘:类型参数、通配符与最佳实践

引言在编程世界中，代码的可重用性和可维护性是至关重要的。为了实现这些目标，Java5引入了一种名为泛型（Generics）的强大功能。本文将详细介绍Java泛型的概念、优势和局限性，以及如何在...

K8s 的标签与选择器:流畅运维的秘诀

在Kubernetes的世界里，**标签（Label）和选择器（Selector）**并不是最炫酷的技术，但却是贯穿整个集群管理与运维流程的核心机制。正是它们让复杂的资源调度、查询、自动化运维变得...

哈希Hash算法:原理、应用（哈希算法 知乎）

原作者：Linux教程，原文地址：「链接」什么是哈希算法？哈希算法（HashAlgorithm），又称为散列算法或杂凑算法，是一种将任意长度的数据输入转换为固定长度输出值的数学函数。其输出结果通常被...

C#学习:基于LLM的简历评估程序（c# 简历）

前言在pocketflow的例子中看到了一个基于LLM的简历评估程序的例子，感觉还挺好玩的，为了练习一下C#，我最近使用C#重写了一个。准备不同的简历：image-20250528183949844查...

55顺位，砍41+14+3!季后赛也成得分王，难道他也是一名球星?

雷霆队最不可思议的新星：一个55号秀的疯狂逆袭！你是不是也觉得NBA最底层的55号秀，就只能当饮水机管理员？今年的55号秀阿龙·威金斯恐怕要打破你的认知了！常规赛阶段，这位二轮秀就像开了窍的天才，直接...

5分钟读懂C#字典对象（c# 字典获取值）

什么是字典对象在C#中，使用Dictionary类来管理由键值对组成的集合，这类集合被称为字典。字典最大的特点就是能够根据键来快速查找集合中的值，其键的定义不能重复，具有唯一性，相当于数组索引值，字典...

c#窗体传值（c# 跨窗体传递数据）

在WinForm编程中我们经常需要进行俩个窗体间的传值。下面我给出了两种方法，来实现传值一、在输入数据的界面中定义一个属性，供接受数据的窗体使用1、子窗体usingSystem;usingSyst...

C#入门篇章—委托（c#委托的理解）

C#委托1.委托的定义和使用委托的作用：如果要把方法作为函数来进行传递的话，就要用到委托。委托是一个类型，这个类型可以赋值一个方法的引用。C#的委托通过delegate关键字来声明。声明委托的...

C#.NET in、out、ref详解（c#.net framework）

简介在C#中，in、ref和out是用于修改方法参数传递方式的关键字，它们决定了参数是按值传递还是按引用传递，以及参数是否必须在传递前初始化。基本语义对比修饰符传递方式可读写性必须初始化调用...

C#广义表（广义表headtail）

在C#中，广义表（GeneralizedList）是一种特殊的数据结构，它是线性表的推广。广义表可以包含单个元素（称为原子），也可以包含另一个广义表（称为子表）。以下是一个简单的C#广义表示例代...

「C#.NET 拾遗补漏」04:你必须知道的反射

阅读本文大概需要3分钟。通常，反射用于动态获取对象的类型、属性和方法等信息。今天带你玩转反射，来汇总一下反射的各种常见操作，捡漏看看有没有你不知道的。获取类型的成员Type类的GetMembe...

C#启动外部程序的问题（c#怎么启动）

IT&OT的深度融合是智能制造的基石。本公众号将聚焦于PLC编程与上位机开发。除理论知识外，也会结合我们团队在开发过程中遇到的具体问题介绍一些项目经验。在使用C#开发上位机时，有时会需要启动外部的一些...

全网最狠C#面试拷问:这20道题没答出来，别说你懂.NET!

在竞争激烈的C#开发岗位求职过程中，面试是必经的一道关卡。而一场高质量的面试，不仅能筛选出真正掌握C#和.NET技术精髓的人才，也能让求职者对自身技术水平有更清晰的认知。今天，就为大家精心准备了20道...

C#匿名方法（c#匿名方法与匿名类）

C#中的匿名方法是一种没有名称只有主体的方法，它提供了一种传递代码块作为委托参数的技术。以下是关于C#匿名方法的一些重要特点和用法：特点省略参数列表：使用匿名方法可省略参数列表，这意味着匿名方法...

C# Windows窗体(.Net Framework)知识总结

Windows窗体可大致分为Form窗体和MDI窗体，Form窗体没什么好细说的，知识点总结都在思维导图里面了，下文将围绕MDI窗体来讲述。MDI（MultipleDocumentInterfac...

一周热门
最近发表
标签列表