springboot+echarts入门案例

首先IDEA创建个springboot项目,选择1.5.3版本,pom文件中加入依赖

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.da</groupId>
    <artifactId>myweight</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>myweight</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.13.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <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>1.3.2</version>
        </dependency>

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

        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>echarts</artifactId>
            <version>4.0.4</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

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

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jta-narayana</artifactId>
        </dependency>
    </dependencies>

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


</project>

这里用thymleaf做模版引擎，druid做数据库连接池，mybatis做持久层，使用webjars作为js静态资源
配置yml文件

spring:
  thymeleaf:
    cache: false
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/test
    driver-class-name: com.mysql.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
#   配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
#  mvc:
#    view:
#      prefix: /templates/
#      suffix: .html
mybatis:
  config-location: classpath:mybatis/mybatis-config.xml
  mapper-locations: classpath:mybatis/mapper/*.xml
#    schema:
#      - classpath:department.sql
server:
  port: 8088

这里要禁用下模版引擎的缓存方便调试，然后指定mabatis配置文件的位置和mapper的位置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
</configuration>

mybatis-config.xml简单配置一下

实体类：

package com.da.weight.bean;

import java.util.List;

public class Person {
    private Integer id;
    private String username;
    private String password;
    private List<Weight> weights;

    public Person() {
        super();
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public List<Weight> getWeights() {
        return weights;
    }

    public void setWeights(List<Weight> weights) {
        this.weights = weights;
    }

    @Override
    public String toString() {
        return "Person [id=" + id + ", username=" + username + ", weights=" + weights + "]";
    }
}

package com.da.weight.bean;

public class Weight {
    private Integer id;
    private double weight;
    private String wdate;
    private String info;

    public Weight() {
        super();
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public double getWeight() {
        return weight;
    }

    public void setWeight(double weight) {
        this.weight = weight;
    }

    public String getWdate() {
        return wdate;
    }

    public void setWdate(String wdate) {
        this.wdate = wdate;
    }

    public String getInfo() {
        return info;
    }

    public void setInfo(String info) {
        this.info = info;
    }

    @Override
    public String toString() {
        return "Weight [id=" + id + ", weight=" + weight + ", wdate=" + wdate + ", info=" + info + "]";
    }
}

mapper：@MapperScan(“com.da.weight.mapper”)在启动类上加上该注解，在接口上可以不用写@Mapper

package com.da.weight.mapper;

import com.da.weight.bean.Person;

public interface PersonMapper {
    public Person findWeightByPerson(Integer id);
}

package com.da.weight.mapper;

import java.util.List;

import com.da.weight.bean.Weight;

public interface WeightMapper {
    public List<Weight> findWeights(Integer uid);
}

这里分两个接口和mapper文件是测试一下垮mapper调用接口

<?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.da.weight.mapper.WeightMapper">
    <select id="findWeights" resultType="com.da.weight.bean.Weight">
        select * from w_weight where uid=#{uid} order by id asc
    </select>
</mapper>

<?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.da.weight.mapper.PersonMapper">

    <resultMap type="com.da.weight.bean.Person" id="personMap">
        <id column="id" property="id" />
        <association property="weights"
            select="com.da.weight.mapper.WeightMapper.findWeights" column="id"></association>
    </resultMap>

    <select id="findWeightByPerson" resultMap="personMap">
        select id,username from w_user where id=#{id}
    </select>
</mapper>

控制类：

package com.da.weight.controller;

import com.da.weight.bean.Person;
import org.springframework.beans.factory.annotation.Autowired;
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.da.weight.service.PersonService;

@Controller
public class PersonController {
    @Autowired
    private PersonService personService;

    @GetMapping("/myWeight")
    @ResponseBody
    public Person getPerson(Integer id) {
        return personService.getPerson(id);
    }

    @GetMapping("/toPerson")
    public String toPerson(){
        return "person/person";
    }

    @GetMapping("/index")
    public String index() {
        return "index";
    }
}

页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="/webjars/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/echarts/4.0.4/dist/echarts.js"></script>
    <script type="text/javascript" src="/webjars/echarts/4.0.4/dist/echarts.common.min.js"></script>

    <title>体重</title>
</head>
<script type="text/javascript">
    var option
    var myChart

    $(function () {
        initChart()
        //基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main'));
        //myChart.setOption(option)
    })

    function showWeight() {
        $.ajax({
            type: "GET",
            url: "myWeight?id=1",
            data: {},
            success: function (r) {
                //console.log(r)
                initChart()
                //option.title.text = r.username+"的体重"
                option.legend.data[0] = r.username
                option.series[0] = {"name": r.username, "type": "line", "data": []}
                //option.series[0].name = r.username
                //option.series[0].type = 'line'
                for (var i in r.weights) {
                    option.series[0].data[i] = r.weights[i].weight
                    option.xAxis[0].data[i] = r.weights[i].wdate
                }
                //option.series[1] = {"name": r.username, "type": "line", "data": [1,2,8,12,21,9]}
                myChart.setOption(option)
            }
        });
    }

    function initChart() {
        option = {
            title: {
                text: "体重趋势表",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c}kg"
            },
            legend: {
                x: 'left',
                data: []
            },
            xAxis: [
                {
                    type: "category",
                    name: "日期",
                    splitLine: {show: false},
                    data: []
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        formatter: '{value} kg'
                    },
                    name: "体重",
                    max: 90,
                    min: 50,
                    splitNumber: 5
                }
            ],
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: []
        };
    }

</script>
<body>
<h1 style="text-align: center">体重查看页面</h1>
<a href="javascript:void(0)" onclick="showWeight()"
   style="text-decoration: none;margin-left: 140px">查看我的体重</a>
<div id="main" style="height:460px;width: 85%;margin: 20px auto 0"></div>

</body>
</html>

//基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById(‘main’));
myChart.setOption(option)
这两句是把#main的div变成echart容器，然后给echart赋图表

tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}kg"
}

这句话是数据格式化显示的方法
y轴的显示数据范围太大百度了一些参数调整
splitNumber: 5 这个刻度间隔5貌似也不起效果

效果图：

echart快速入门 echart模版demo1 echart模版demo2
最后：IDEA如果快速格式化按键失效看看是不是和网易云音乐后台快捷键冲突了233