Spring Boot2.0 教程全集

文章16 |   阅读 10205 |   点赞0

来源：https://blog.csdn.net/xu12387/category_9287060.html

springboot（十六）echarts报表的使用

转x33g5p2x  于2021-12-17 转载在 Echarts  
字(6.1k)|赞(0)|评价(0)|浏览(1308)

前言：

      在开发过程中少不了对报表的整合，虽然我们后端只提供数据，但是也避免不了自己来实现前端的可能。所以我们也得简单得了解下echarts的使用！

      接下来我们完成查询数据库并让数据生成可视化的报表！

实现：

   数据库：商品表

  1. CREATE TABLE `product` (
  2.   `pid` int(11) NOT NULL AUTO_INCREMENT,
  3.   `product_name` varchar(20) COLLATE utf8_bin NOT NULL DEFAULT '',
  4.   `num` int(11) NOT NULL DEFAULT '0',
  5.   `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  6.   PRIMARY KEY (`pid`,`product_name`,`num`,`create_time`)
  7. ) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

   新建项目sprinboot-echarts,打开pom.xml

  1. <dependencies>
  2. 		<dependency>
  3. 			<groupId>org.springframework.boot</groupId>
  4. 			<artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. 		</dependency>
  6. 			<!--springdata jpa-->
  7. 			<dependency>
  8. 				<groupId>org.springframework.boot</groupId>
  9. 				<artifactId>spring-boot-starter-data-jpa</artifactId>
  10. 			</dependency>
  11. 			<!--web-->
  12. 			<dependency>
  13. 				<groupId>org.springframework.boot</groupId>
  14. 				<artifactId>spring-boot-starter-web</artifactId>
  15. 			</dependency>
  16. 			<!--mysql-->
  17. 			<dependency>
  18. 				<groupId>mysql</groupId>
  19. 				<artifactId>mysql-connector-java</artifactId>
  20. 				<version>5.1.44</version>
  21. 			</dependency>
  22. 			<!--druid连接池-->
  23. 			<dependency>
  24. 				<groupId>com.alibaba</groupId>
  25. 				<artifactId>druid-spring-boot-starter</artifactId>
  26. 				<version>1.1.10</version>
  27. 			</dependency>
  28. 			<!--test-->
  29. 			<dependency>
  30. 				<groupId>org.springframework.boot</groupId>
  31. 				<artifactId>spring-boot-starter-test</artifactId>
  32. 				<scope>test</scope>
  33. 			</dependency>
  34. 			<!--lombok-->
  35. 			<dependency>
  36. 				<groupId>org.projectlombok</groupId>
  37. 				<artifactId>lombok</artifactId>
  38. 				<version>1.16.22</version>
  39. 			</dependency>
  41. 	</dependencies>

  配置application.properties资源文件

  1. #配置静态资源文件路径
  2. spring.mvc.static-path-pattern=/static/**
  4. #数据库配置
  5. spring.datasource.type= com.alibaba.druid.pool.DruidDataSource
  6. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  7. spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot2?useUnicode=true&characterEncoding=UTF-8
  8. spring.datasource.username=root
  9. spring.datasource.password=123456
  11. #jpa配置
  12. spring.jpa.database=mysql
  13. #是否显示sql
  14. spring.jpa.show-sql=true
  15. # create       每次运行该程序，没有表会新建表，表内有数据会清空
  16. # create-drop  每次程序结束的时候会清空表
  17. # update       每次运行程序，没有表会新建表，表内有数据不会清空，只会更新
  18. # validate     运行程序会校验数据与数据库的字段类型是否相同，不同会报错
  19. spring.jpa.hibernate.ddl-auto=update
  21. #指定日期格式 yyyy-MM-dd HH:mm:ss
  22. spring.jackson.date-format: yyyy-MM-dd HH:mm:ss
  23. #mvc序列化时候时区选择
  24. spring.jackson.time-zone: GMT+8

  实体对象Product.java

  1. @Data
  2. @Entity
  3. public class Product implements Cloneable{
  4.     //id 商品ID
  5.     @Id
  6.     @GeneratedValue(strategy = GenerationType.AUTO)
  7.     private int pid;
  8.     //商品名称
  9.     private String productName;
  10.     //商品数量
  11.     private int num;
  12.     //创建时间
  13.     private Date create_time;
  15.     @Override
  16.     public Object clone() {
  17.         try {
  18.             return super.clone();
  19.         } catch (CloneNotSupportedException e) {
  20.             e.printStackTrace();
  21.             return null;
  22.         }
  23.     }
  25. }

      注：大家可能会疑惑我为什么要实现Cloneable接口，这里是为了后面演示添加数据时复制对象用的。调用clone复制对象

 编写ProductReposity.java

  1. public interface ProductReposity extends JpaRepository<Product,Integer>{
  2. }

 编写ProductService.java

  1. public interface ProductService {
  2.     List<Product> findAll();
  4.     List<Product> adds(List<Product> list);
  6. }

 编写ProductServiceImpl.java

  1. @Service
  2. public class ProductServiceImpl implements ProductService {
  3.     @Resource
  4.     private ProductReposity reposity;
  6.     @Override
  7.     public List<Product> findAll() {
  8.         return reposity.findAll();
  9.     }
  11.     @Override
  12.     public List<Product> adds(List<Product> list) {
  13.        return reposity.saveAll(list);
  14.     }
  15. }

 编写测试类添加数据.java

  1. @RunWith(SpringRunner.class)
  2. @SpringBootTest
  3. public class SpringbootEchartsApplicationTests {
  5.     @Resource
  6.     private ProductService productService;
  8.     @Test
  9.     public void add() {
  10.         Product p = new Product();
  11.         p.setPid(1);
  12.         p.setProductName("鞋子");
  13.         p.setNum(20);
  14.         Product p1 = (Product) p.clone();
  15.         p1.setPid(2);
  16.         p1.setProductName("袜子");
  17.         p1.setNum(30);
  18.         Product p2 = (Product) p.clone();
  19.         p2.setPid(3);
  20.         p2.setProductName("衣服");
  21.         p2.setNum(50);
  22.         Product p3 = (Product) p.clone();
  23.         p3.setPid(4);
  24.         p3.setProductName("裤子");
  25.         p3.setNum(60);
  27.         List<Product> products = Arrays.asList(p, p1, p2, p3);
  28.         try {
  29.             productService.adds(products);
  30.         } catch (Exception e) {
  31.             System.out.println(e.getMessage());
  32.         }
  33.     }
  34.     @Test
  35.     public void findAll() {
  36.         List<Product> all = productService.findAll();
  37.         System.out.println(all);
  38.     }
  39. }

     注：clone()方法实现完全复制，这也是我们的原型模式中的浅拷贝方式

            原型模式：https://blog.csdn.net/xu12387/article/details/88941419

编写ProductController.java

  1. @Controller
  2. public class ProductController {
  3.     @Autowired
  4.     private ProductService productService;
  6.     @GetMapping("/index")
  7.     public String index(){
  8.         return "index";
  9.     }
  11.     @GetMapping("/list")
  12.     @ResponseBody
  13.     public Map<String,List> findAll(){
  14.         List<Product> list = productService.findAll();
  15.         List<String> productNameList = list.stream().map(Product::getProductName).collect(Collectors.toList());
  16.         List<Integer> numList = list.stream().map(Product::getNum).collect(Collectors.toList());
  17.         Map<String,List> map=new HashMap<>();
  18.         map.put("productName",productNameList);
  19.         map.put("num",numList);
  20.         return map;
  21.     }
  23. }

  添加js文件resouce/static

 编写index.html

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>ECharts</title>
  7.     <script src="/static/echarts.min.js"></script>
  8.     <script src="/static/jquery.min.js"></script>
  9. </head>
  11. <body>
  12. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  13. <div id="main" style="width: 600px;height:400px;"></div>
  15. <script type="text/javascript">
  16.     // 基于准备好的dom，初始化echarts实例
  17.     var myChart = echarts.init(document.getElementById('main'));
  18.     // 显示标题，图例和空的坐标轴
  19.     myChart.setOption({
  20.         title: {
  21.             text: '商品数量'
  22.         },
  23.         tooltip: {},
  24.         legend: {
  25.             data: ['库存量']
  26.         },
  27.         xAxis: {
  28.             data: []
  29.         },
  30.         yAxis: {},
  31.         series: [{
  32.             name: '库存量',
  33.             type: 'bar',
  34.             data: []
  35.         }]
  36.     });
  37.     //加载动画
  38.     myChart.showLoading();
  39.     // 异步加载数据
  40.     $.get('list').done(function(data) {
  41.         // 填入数据
  42.         myChart.setOption({
  43.             xAxis: {
  44.                 data: data.productName
  45.             },
  46.             series: [{
  47.                 //根据名字对应到相应的系列
  48.                 name: '库存量',
  49.                 type: 'bar',
  50.                 data: data.num
  51.             }]
  52.         });
  53.         myChart.hideLoading();
  54.     });
  55. </script>
  56. </body>
  58. </html>

       注：更多echarts案例访问官网：https://echarts.baidu.com/examples/

              如果没使用模板，外部调用接口，注意跨域问题哟！

              跨域解决：https://blog.csdn.net/xu12387/article/details/88869749

测试：

  访问localhost:8080/index

源码地址：https://gitee.com/xu0123/springboot2

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/xu12387/article/details/88951671

内容来源于网络，如有侵权，请联系作者删除！

springbootecharts

相关文章

    查看更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com