SpringBoot结合Echarts显示图表

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这两个文件夹应该是同级，附上目录结构图：

image

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 findById(Model model) {
        List list = new ArrayList();  
        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

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

  

  image