springboot（十六）echarts报表的使用

前言：

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

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

        

实现：

     数据库：商品表

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

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

		
			org.springframework.boot
			spring-boot-starter-thymeleaf
		
			
			
				org.springframework.boot
				spring-boot-starter-data-jpa
			
			
			
				org.springframework.boot
				spring-boot-starter-web
			
			
			
				mysql
				mysql-connector-java
				5.1.44
			
			
			
				com.alibaba
				druid-spring-boot-starter
				1.1.10
			
			
			
				org.springframework.boot
				spring-boot-starter-test
				test
			
			
			
				org.projectlombok
				lombok
				1.16.22
			

	

    配置application.properties资源文件

#配置静态资源文件路径
spring.mvc.static-path-pattern=/static/**

#数据库配置
spring.datasource.type= com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/springboot2?useUnicode=true&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456

#jpa配置
spring.jpa.database=mysql
#是否显示sql
spring.jpa.show-sql=true
# create       每次运行该程序，没有表会新建表，表内有数据会清空
# create-drop  每次程序结束的时候会清空表
# update       每次运行程序，没有表会新建表，表内有数据不会清空，只会更新
# validate     运行程序会校验数据与数据库的字段类型是否相同，不同会报错
spring.jpa.hibernate.ddl-auto=update


#指定日期格式 yyyy-MM-dd HH:mm:ss
spring.jackson.date-format: yyyy-MM-dd HH:mm:ss
#mvc序列化时候时区选择
spring.jackson.time-zone: GMT+8

    实体对象Product.java

@Data
@Entity
public class Product implements Cloneable{
    //id 商品ID
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int pid;
    //商品名称
    private String productName;
    //商品数量
    private int num;
    //创建时间
    private Date create_time;

    @Override
    public Object clone() {
        try {
            return super.clone();
        } catch (CloneNotSupportedException e) {
            e.printStackTrace();
            return null;
        }
    }

}

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

   编写ProductReposity.java

public interface ProductReposity extends JpaRepository{
}

   编写ProductService.java

public interface ProductService {
    List findAll();

    List adds(List list);

}

   编写ProductServiceImpl.java

@Service
public class ProductServiceImpl implements ProductService {
    @Resource
    private ProductReposity reposity;

    @Override
    public List findAll() {
        return reposity.findAll();
    }

    @Override
    public List adds(List list) {
       return reposity.saveAll(list);
    }
}

   编写测试类添加数据.java

@RunWith(SpringRunner.class)
@SpringBootTest
public class SpringbootEchartsApplicationTests {

    @Resource
    private ProductService productService;

    @Test
    public void add() {
        Product p = new Product();
        p.setPid(1);
        p.setProductName("鞋子");
        p.setNum(20);
        Product p1 = (Product) p.clone();
        p1.setPid(2);
        p1.setProductName("袜子");
        p1.setNum(30);
        Product p2 = (Product) p.clone();
        p2.setPid(3);
        p2.setProductName("衣服");
        p2.setNum(50);
        Product p3 = (Product) p.clone();
        p3.setPid(4);
        p3.setProductName("裤子");
        p3.setNum(60);

        List products = Arrays.asList(p, p1, p2, p3);
        try {
            productService.adds(products);
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }
    @Test
    public void findAll() {
        List all = productService.findAll();
        System.out.println(all);
    }
}

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

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

  编写ProductController.java

@Controller
public class ProductController {
    @Autowired
    private ProductService productService;

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

    @GetMapping("/list")
    @ResponseBody
    public Map findAll(){
        List list = productService.findAll();
        List productNameList = list.stream().map(Product::getProductName).collect(Collectors.toList());
        List numList = list.stream().map(Product::getNum).collect(Collectors.toList());
        Map map=new HashMap<>();
        map.put("productName",productNameList);
        map.put("num",numList);
        return map;
    }

}

    添加js文件resouce/static

   编写index.html

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

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

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

测试：

    访问localhost:8080/index

 

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

上一篇：springboot（十五）redis实现分布式session共享