springboot echarts

sql 复制代码

/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 80019 (8.0.19)
 Source Host           : localhost:3306
 Source Schema         : echartstest

 Target Server Type    : MySQL
 Target Server Version : 80019 (8.0.19)
 File Encoding         : 65001

 Date: 15/03/2024 14:50:02
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for echarts
-- ----------------------------
DROP TABLE IF EXISTS `echarts`;
CREATE TABLE `echarts`  (
  `id` int NOT NULL,
  `num` int NULL DEFAULT NULL,
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of echarts
-- ----------------------------
INSERT INTO `echarts` VALUES (1, 3, '666');
INSERT INTO `echarts` VALUES (2, 2, '777');
INSERT INTO `echarts` VALUES (3, 3, '888');

SET FOREIGN_KEY_CHECKS = 1;

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.3.RELEASE</version>
		<relativePath/>
	</parent>
	<groupId>com</groupId>
	<artifactId>information</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>information</name>
	<description>测试echarts</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.1</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.4.2</version>
		</dependency>




		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</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>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

java 复制代码

@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

java 复制代码

@Controller
@RequestMapping("echarts")
public class EchartsController  {

    @Resource
    private EchartsService echartsService;

    @RequestMapping("list")
    @ResponseBody
    public List<Echarts> list(){
        return echartsService.list();
    }

    @RequestMapping("demo1")
    public String demo1(){
        return "demo1";
    }

    @RequestMapping("demo2")
    public String demo2(){
        return "demo2";
    }
}

java 复制代码

@Data
public class Echarts {


    @TableId
    private Integer id;

    private String name;

    private Integer num;

}

java 复制代码

public interface EchartsMapper extends BaseMapper<Echarts> {

}

java 复制代码

public interface EchartsService extends IService<Echarts> {

}

java 复制代码

@Service("echartsService")
public class EchartsServiceImpl extends ServiceImpl<EchartsMapper, Echarts> implements EchartsService {

}

java 复制代码

@MapperScan("com.yhh.mapper")
@SpringBootApplication
public class InformationApplication {

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

}

html 复制代码

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

<body>
<div id = "main" style="width: 400px;height: 300px"> </div>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    // 指定图表的配置项和数据
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };

    // 定义x、y轴数据数组
    var names=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/echarts/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                names.push(res[i].name);
                nums.push(res[i].num);
            }
            console.log(names);
            myChart.setOption({
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '名字',
                    data: nums
                }]
            });
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

yml 复制代码

spring:
  thymeleaf:
    cache: false # 关闭缓存,默认开启
  #    prefix: classpath:/pages/  #修改默认路径 classpath:/templates/
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/echartsTest?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&rewriteBatchedStatements=true
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
  resources:
    static-locations: classpath:/templates/, classpath:/static/
# mybatis-plus配置
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  typeAliasesPackage: com.information.entity
  mapperLocations: classpath:mapper/*.xml