springboot整合echarts实现异步加载

1.pom坐标

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

    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.2</version>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.20</version>
    </dependency>

    <dependency>
        <groupId>tk.mybatis</groupId>
        <artifactId>mapper-spring-boot-starter</artifactId>
        <version>2.0.2</version>
    </dependency>

    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>


    <!--配置资源拷贝插件-->
    <resources>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.xml</include>
            </includes>
        </resource>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.yml</include>
                <include>**/*.properties</include>
            </includes>
        </resource>

        <resource>
            <directory>src/main/resources</directory>
        </resource>
    </resources>
</build>

2.配置文件

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/test?serverTimezone=UTC
    driverClassName: com.mysql.cj.jdbc.Driver
    username: root
    password: root
    type: com.alibaba.druid.pool.DruidDataSource
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    cache: false
    servlet:
      content-type: text/html

3.采用的是通用mapper(根据你个人的后台数据库)

public interface PhoneDataMapper extends Mapper<PhoneData> {
}

mapper的xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.mappers.PhoneDataMapper" >
  <resultMap id="BaseResultMap" type="com.example.demo.pojo.PhoneData" >
    <!--
      WARNING - @mbg.generated
    -->
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="title" property="title" jdbcType="VARCHAR" />
    <result column="data" property="data" jdbcType="INTEGER" />
  </resultMap>
</mapper>

4.pojo

package com.example.demo.pojo;

import javax.persistence.*;

@Table(name = "echarts")
public class PhoneData {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String title;

    private Integer data;

    /**
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * @return title
     */
    public String getTitle() {
        return title;
    }

    /**
     * @param title
     */
    public void setTitle(String title) {
        this.title = title;
    }

    /**
     * @return data
     */
    public Integer getData() {
        return data;
    }

    /**
     * @param data
     */
    public void setData(Integer data) {
        this.data = data;
    }
}

5.controller(异步加载的请求)

import java.util.List;

@Controller
public class EchartsController {

     @Autowired
     private PhoneDataMapper phoneDataMapper;

    @RequestMapping("/getEchart")
    @ResponseBody
    public List<PhoneData> getEchats(){
        List<PhoneData> phoneData = this.phoneDataMapper.selectAll();
        System.out.println("phoneData===>"+phoneData.size());
        return phoneData;
    }
}

（2）

@Controller
public class PageController {

    @RequestMapping("/{page}")

    public String getPage(@PathVariable String page){
        return page;
    }
}

6.启动文件

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import tk.mybatis.spring.annotation.MapperScan;

@SpringBootApplication
@MapperScan("com.example.demo.mappers")
public class DemoApplication {

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

}

7.echarts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
     <div id="main" style="width: 600px;height:400px;"></div>
     <script>
         var myChart = echarts.init(document.getElementById('main'));
         // 显示标题，图例和空的坐标轴
         myChart.setOption({
             title: {
                 text: '手机销量'
             },
             tooltip: {},
             legend: {
                 data:['销量']
             },
             xAxis: {
                 data: []
             },
             yAxis: {},
             series: [{
                 name: '销量',
                 type: 'bar',
                 data: []
             }]
         });
        $.ajax({
            url:'/getEchart',
            type:'post',
            success:function (data) {
                var titles=[];
                var datas=[];
                for (var i=0;i<data.length;i++){
                    titles.push(data[i].title);
                    datas.push(data[i].data)
                }

                myChart.setOption({
                    xAxis:{data: titles},
                    series:{data: datas}
                })
            }
        })
     </script>
</body>
</html>

结果运行图：