Spring boot 中 echart 的使用入门_springboot echart-优快云博客

本文链接：https://blog.youkuaiyun.com/sy755754582/article/details/90449149

文章目录

1.echart简介

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

2.新建一个Spring boot工程

由于官网教程使用的使静态页面html+ajax局部刷新来加载echart，所以创建spring boot时需要引入thymeleaf依赖，方便后端找到html资源。
在这里插入图片描述

导入依赖：

        <!--支持html-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--web模块-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

2.1 导入echart.js文件

如果你喜欢精致的代码，建议进行定制：私人定制

如果你喜欢简单粗暴，直接把官方全部的代码粘贴过来也行：全部代码

新建一个js/echart.js文件，将官方的代码拷贝进去。定制的直接将下载好的js文件拖进去即可。
在这里插入图片描述

2.2 测试

测试效果肯定需要一个静态页面来显示吧。

首先创建一个index.html文件，这是80端口默认的入口，访问的时候直接输入localhost:8080即可：

引入ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
    <script src="js/echarts.js"></script>
</head>

准备一个div容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图.

<body>

    ...
   
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

运行启动项DemoApplication，输入localhost:8080
或者也可以创建controller层，自己定义入口

这里注意：所有的包和文件目录级数不能高于启动文件DemoApplication

@Controller
public class IndexController {

    @RequestMapping("/index")
    public String show() {
        System.out.println("这里是index入口");
        return "index";
    }
}

在这里插入图片描述