Spring Boot 实践折腾记（20）：Thymleaf + webjar + ECharts 构建本地图表

前言

作为geek后端程序员，画图的选择其实有很多，手画，excel，ppt，copy别人的图等。虽然用excel最方便，但是类似按中国省份来显示详细数据的图，excel是画不了的，而PPT画起来又很费劲。而JS有工具却能轻松的解决这个问题，似乎又得学习前端来画图？

并不是。后端工程师擅长处理数据，而借用Spring Boot + ECharts，就能结合数据和前端快速的画一个优雅的图。

知识点

1. Spring Boot ： web-starer的引入、spring boot编译插件的引入。
2. 模板引擎： Thymleaf的使用。html知识。
3. webjar： webjar 和 webjar-locator 的使用。
4. jQuery： ajax的用法。JS知识。
5. ECharts： 图表的基本用法。ECharts官网

实战

1、环境准备

• 一台电脑
• InrelliJ IDEA

2、创建 Spring Boot 启动工程

完整Demo地址：https://github.com/mickjoust1018/mickjoust-boot-demo/tree/master/boot-echarts

1. 新建包：com.mickjoust.demo.spring.boot
2. 创建 Class ：LocalChart
3. 配置一个 @RestController 并使用 @SpringBootApplication 自动启动。
4. 加载默认启动项：SpringApplication.run(LocalChart.class,args);

LocalChart.java 代码示例

package com.mickjoust.demo.spring.boot;

import com.alibaba.fastjson.JSON;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@SpringBootApplication
public class LocalChart {
   
   

    public static void main(String[] args) {
   
   
        SpringApplication.run(LocalChart.class,args);
    }
}

5. 配置 Maven 依赖。

pom.xml 示例

	<properties> //1
		<spring.boot.version>2.1.3.RELEASE</spring.boot.version>
	</properties>

    <build> //2
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring.boot.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

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