SpringBoot+Thymeleaf+Echarts显示图表

最新推荐文章于 2023-02-05 13:54:39 发布

南丘xf

最新推荐文章于 2023-02-05 13:54:39 发布

阅读量2.8k

点赞数 4

分类专栏： Spring

本文链接：https://blog.csdn.net/weixin_39309402/article/details/98126965

版权

Spring 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

SpringBoot+Thymeleaf的配置以及依赖，前面已经讲过，这里顺便一提Thymeleaf的配置文件以及js或者css的存放位置，方便记录，我的配置文件如：

#配置thymeleaf缓存开发期间先关闭，否则影响测试
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.static-path-pattern=/static/**

期间犯了一个错误，我在templates文件夹下新建static，而且把相应的js和css文件放入该目录之中，导致无法加载该静态文件，后查阅配置文件，方知templates和static这两个文件夹应该是同级，附上目录结构图：

目录结构图.png

Echarts插件，对于图表操控是十分方便的，但是一般生产环境，是把数据通过Json的格式传到HTML页面，利用Ajax解析Json，所以我们来模拟一下该过程：

1、下载Echarts的js文件和Jquery.js
Echarts地址：http://echarts.baidu.com/download.html
Jquery地址：https://jquery.com/download/
2、建一个Entity，引入简单数据，Echarts：

package com.guxf.demo.domain;

public class Echars {
     private String name;
     private Integer num;

     public Echars(String name, Integer num) {
            super();
            this.name = name;
            this.num = num;
    }
// getter和setter以及toString略
}

3、直接写Controller（生产环境数据一般从数据库中取，此处免掉）

package com.guxf.demo.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.guxf.demo.domain.Echars;
 
@Controller
public class EcharsAction {
 
    @RequestMapping(value = "/EcharsShow")
    @ResponseBody
    public List<Echars> findById(Model model) {
        List<Echars> list = new ArrayList<Echars>();  
        list.add(new Echars("帽子",50));
        list.add(new Echars("鞋子",126));
        list.add(new Echars("毛衣",75));
        list.add(new Echars("羽绒服",201));
        list.add(new Echars("羊毛衫",172));
        System.err.println(list.toString());
            
        return list;
    }
    
    @GetMapping(value = "/Echars.do")
    public String echarts4(Model model){
        System.err.println("========开始");
        return "Echars";
    }

}

4、附上Html，文件名Echars.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图表</title>
<script src="../static/js/jquery.js" th:href=@{/js/jquery.js}></script>
<script src="../static/js/echarts.js" th:href=@{/js/echarts.js}></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/EcharsShow",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].name);
                        values.push(result[i].num);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        tooltip: {},
                        legend: {
                            data:['數量']
                        },
                        xAxis: {
                            data: names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '數量',//薪资 series not exists. Legend data should be same with series name or data name.
                            type: 'bar',
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });

</script>

</body>
</html>

5、启动application，输入地址：http://localhost:8088/Echars.do

效果.png

南丘xf

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot+Thymeleaf+Echarts显示图表

SpringBoot+Thymeleaf的配置以及依赖，前面已经讲过，这里顺便一提Thymeleaf的配置文件以及js或者css的存放位置，方便记录，我的配置文件如：#配置thymeleaf缓存开发期间先关闭，否则影响测试spring.thymeleaf.cache=falsespring.thymeleaf.prefix=classpath:/templates/spring.mvc...
复制链接

扫一扫

专栏目录