正文

学会echarts，让Spring Boot图表动起来：轻松集成步骤详解

/0 浏览量
0415

在当今的数据可视化领域，echarts 凭借其丰富的图表类型和易用的 API，成为了开发者的热门选择。而 Spring Boot 作为 Java 项目的快速开发框架，与 echarts 的结合可以轻松实现动态图表的展示。本文将详细介绍如何在 Spring Boot 项目中集成 echarts，让你轻松打造动感的图表界面。

一、echarts 简介

echarts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，并且可以轻松实现动画效果。echarts 的特点如下：

  • 丰富的图表类型：提供多种图表类型，满足不同场景的需求。
  • 动画效果：图表加载和交互操作时具有丰富的动画效果。
  • 跨平台：可以在 PC、移动端等多个平台上运行。
  • 高度可定制：支持自定义图表样式、配置项等。

二、集成 echarts

1. 添加依赖

首先，需要在 Spring Boot 项目中添加 echarts 的依赖。由于 Spring Boot 项目通常使用 Maven 或 Gradle 进行管理，以下分别介绍两种情况。

Maven

在 pom.xml 文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>echarts</artifactId>
    <version>4.9.0</version>
</dependency>

Gradle

在 build.gradle 文件中添加以下依赖：

implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'com.github.abel533:echarts:4.9.0'

2. 配置 echarts

在 Spring Boot 项目中，需要配置 echarts 的相关参数。以下以 Maven 项目为例，介绍如何进行配置。

在 application.properties 或 application.yml 文件中添加以下配置：

echarts.resource.path=/static/echarts/

3. 创建图表

接下来，创建一个图表对象，并设置图表的配置项和数据。以下是一个简单的折线图示例：

import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.AxisType;
import com.github.abel533.echarts.code.LineType;
import com.github.abel533.echarts.code.MarkType;
import com.github.abel533.echarts.code.Orient;

public class LineChart {
    public Option createLineChart() {
        Option option = new Option();
        option.title().text("折线图示例");
        option.legend().data("销量");

        ValueAxis valueAxis = new ValueAxis();
        valueAxis.type(AxisType.Value);
        option.addXAxis(valueAxis);

        ValueAxis valueAxis2 = new ValueAxis();
        valueAxis2.type(AxisType.Value);
        option.addYAxis(valueAxis2);

        option.series(new Series[] {
            new Series().name("销量").type(LineType.Smooth)
                    .data(new Integer[] { 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 })
                    .markPoint().data(new MarkPoint[] {
                        new MarkPoint().type(MarkType.Max).name("最大值"),
                        new MarkPoint().type(MarkType.Min).name("最小值")
                    })
                    .markLine().data(new MarkLine[] {
                        new MarkLine().type(MarkType Average).name("平均值"),
                        new MarkLine().type(MarkType Average).name("平均值")
                    })
        });

        return option;
    }
}

4. 展示图表

最后，将创建的图表对象转换为 JSON 字符串，并通过 Spring MVC 的控制器返回给前端页面。以下是一个简单的示例：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import com.github.abel533.echarts.ECharts;
import com.github.abel533.echarts.json.GsonOption;

@Controller
public class ChartController {

    @GetMapping("/lineChart")
    public String lineChart(ECharts eCharts) {
        GsonOption option = new GsonOption();
        option = new LineChart().createLineChart();
        eCharts.setOption(option);
        return "lineChart";
    }
}

在前端页面中，可以通过以下方式展示图表：

<!DOCTYPE html>
<html>
<head>
    <title>折线图示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

三、总结

通过以上步骤，你可以在 Spring Boot 项目中轻松集成 echarts，并创建各种类型的动态图表。echarts 的易用性和丰富的功能，将为你的项目带来更加丰富的可视化体验。希望本文对你有所帮助！

-- 展开阅读全文 --