Echarts入门案例

SpringDataJpa+angular.js+Echarts入门案例(动态数据绑定)

echarts中data的数据一般为JSON 数组,所有数据格式为JSON或JSON数组

如 {“name”:[“Android”,“IOS”,“PC”,“Other”],“value”:[420,200,360,100]}

1.因为我们的数据是从数据库读取出来的，所以我们先创表

CREATE TABLE watchway(
id INT(4) PRIMARY KEY AUTO_INCREMENT,
VALUE INT(4),
NAME VARCHAR(20)
)

CREATE TABLE cityInfo(
id INT(4) PRIMARY KEY AUTO_INCREMENT,
VALUE INT(10),
NAME VARCHAR(20)
)

2.创建SpringBoot项目，导入所需要的的依赖

   <!--web启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
   <!--thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-jpa</artifactId>
            <version>2.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

3.修改我们的配置文件 application.yml

server:
 port: 9999
spring:
 datasource:
  url: jdbc:mysql://127.0.0.1:3306/vuejsdemo?useSSL=false&serverTimezone=GMT%2B8
  username: root
  password: 123456
  driver-class-name: com.mysql.cj.jdbc.Driver
 jpa:
  hibernate:
   ddl-auto: update
   naming:
    implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl
    physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
  show-sql: