109 springboot集成通用mapper实现Echarts-CFANZ编程社区

1首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

官网地址：http://echarts.baidu.com/

1.首先在官网选择合适的下载版本

   http://echarts.baidu.com/download.html

2,pom.xml


<dependencies>
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
            <version>RELEASE</version>
        </dependency>
<dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactI
<scope>runtime</scope>
        </dependency>


        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>
        <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>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

3,yml

spring:
  datasource:
   # type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

4,controller:

@RestController
public class EchartsController {

@Autowired
private EchartsService echartsService;


    @RequestMapping("/EchartsShow")
    public List<EchartsEntity> echartsModels(Model model){
        List<EchartsEntity> list=echartsService.selectByAll();
           return  list;
    }
}

5,service


package com.taotao.echarts.service;

import com.taotao.echarts.entity.EchartsEntity;
import com.taotao.echarts.mapper.EchartsMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;



@Service
public class EchartsService {
         @Autowired
         private EchartsMapper echartsMapper;
    public List<EchartsEntity> selectByAll() {
        List<EchartsEntity> list=echartsMapper.selectAll();
        return list;
    }
}

6,entity

@Data
@Table(name = "echarts")
public class EchartsEntity {

    private  long id;
    private String name;
    private  Integer value;

    public EchartsEntity(String name, Integer value) {
        this.name = name;
        this.value = value;
 }

    public EchartsEntity() {
    }
}

7,IMapper

package com.taotao.echarts.mapper;

import tk.mybatis.mapper.common.Mapper;
import tk.mybatis.mapper.common.MySqlMapper;

public interface IMapper<T>extends Mapper<T>,MySqlMapper {
}

8,EchartsMapper

package com.taotao.echarts.mapper;

import com.taotao.echarts.entity.EchartsEntity;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface EchartsMapper extends IMapper<EchartsEntity> {
}

9,echarts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
  $(document).ready(function () {
      var myChart=echarts.init(document.getElementById('main'));
      myChart.showLoading();
 var names=[];//横坐标数据组
      var values=[];
      $.ajax({
          type: "post",
          async: true, //一步请求（同步请求将会锁住浏览器，用户其他请求操作必须等请求完成后才可以执行）
          url:"/EchartsShow", //发送到dataActio处
          data:{},
       dataType: "json", //返回数据形式为json
          success: function (response) {
              //请求成功时执行该函数的内容，result即为服务器返回的json对象
              if(response){
                  for(var i=0;i<response.length;i++){
                     names.push(response[i].name);
                      values.push(response[i].value);
                  }
                  myChart.hideLoading(); //隐藏加载动画
                  myChart.setOption({  //加载数据图表
                      tooltip: {},
           legend: {
                          data:['數量']
                      },
                      xAxis: {
                          data: names
                      },
                     yAxis:{
                          type:'value'
            },
                      series:[{
                          //根据名字对应到相应的系列、
                          name: '数量',//
                          type: 'bar',
                          data: values
                      }]


                  });

   }
          },
          error: function (errorMsg) {
              //请求失败执行此函数
              alert("图表数据请求失败");
              myChart.hideLoading();
          }
      })
  })
</script>
</body>
</html>

10 数据库

-- Table structure for echarts
-- ----------------------------
DROP TABLE IF EXISTS `echarts`;
CREATE TABLE `echarts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `value` int(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of echarts
-- ----------------------------
INSERT INTO `echarts` VALUES ('1', '1', '1');
INSERT INTO `echarts` VALUES ('2', '2', '2');
INSERT INTO `echarts` VALUES ('3', '3', '3');
INSERT INTO `echarts` VALUES ('4', '4', '4');
INSERT INTO `echarts` VALUES ('5', '5', '5');