java+echarts+mysql数据可视化实战1

1、实验环境：

1）IDEA、SpringBoot、Echarts

2）MyBatis plus、mybatis-plus-generator、velocity

3）thymeleaf、spring-web

4）mybatis、mysql、lombok

2、项目目录：

1）controller->ProductsController.java

2）entity->Products.java

3）mapper->ProductsMapper.java

　      　　 ->xml->ProductsMapper.xml

4）service->ProductsService.java

　　　　  ->impl->ProductsServiceImpl.java

5）vo->BarVO/PieVO/ProductsBarVO

BarVO.java

@Data
public class BarVO {
    //柱状图
    private List<String> names;
    private List<Integer> values;
}

PieVO

@Data
@AllArgsConstructor     //带参构造
public class PieVO {
    //饼图格式：{value: 335, name: '直接访问'}
    private Integer value;
    private String name;
}

ProductsBarVO

@Data
public class ProductsBarVO {
    //柱状图
    //变量名一定要和数据库中的查询名字一致
    private String name;
    private Integer count;
}

6）test->mapper->ProductsMapperTest.java

7）test->service->ProductsServiceTest.java

 3、测试流程：

1）ProductsBarVO->ProductsMapper->ProductsMapperTest

2）ProductsService->ProductsServiceImpl->ProductsServiceTest

3）ProductsController->Echarts

4、测试代码：

1）ProductsBarVO.java

package com.task.vo;
@Data
public class ProductsBarVO {
    //柱状图
    //变量名一定要和数据库中的查询名字一致
    private String name;
    private Integer count;
}

2）ProductsMapper.java

package com.task.mapper;

@Repository
public interface ProductsMapper extends BaseMapper<Products> {
    //柱状图
    //商品表-分组（商品种类、商品种类数量）
    //自定义语句
    @Select("SELECT name , sum(pnum) count FROM   estore.products  GROUP BY name")
    public List<ProductsBarVO> findAllProductBarVO();

    @Select("SELECT color name, sum(pnum) count FROM   estore.products  GROUP BY color")
    public List<ProductsBarVO> findColorNumBarVO();
}

3）ProductsMapperTest.java

package com.task.mapper;import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
class ProductsMapperTest {

    @Autowired
    private ProductsMapper mapper;

    //测试横向的findAllProductBarVO
    @Test
    void test(){
        //name、 count都在集合list中
        List<ProductsBarVO> list = mapper.findAllProductBarVO();
        int i = 0;
    }

    @Test
    void test2(){
        //color、 count都在集合list中
        List<ProductsBarVO> list = mapper.findColorNumBarVO();
        int i = 0;
    }
}

4）ProductsService.java

package com.task.service;public interface ProductsService extends IService<Products> {

    //柱状图
    //商品表-分组（商品种类、商品种类数量）
    //把productsBarVO中的数据传到BarVO
    public BarVO getBarVO();

    //PieVO返回一个集合
    public List<PieVO> getPieVO();

    //把productsBarVO中的数据传到BarVO
    public BarVO getBarVO(List<ProductsBarVO> list);
}

5）ProductsServiceImpl.java

package com.task.service.impl;

@Service
public class ProductsServiceImpl extends ServiceImpl<ProductsMapper, Products> implements ProductsService {

    @Autowired
    private ProductsMapper productsMapper;
    //柱状图
    //商品表-分组（商品种类、商品种类数量）
    //业务层封装，即把productBarVO中的集合拆分封装成BarVO两个子对象
    @Override
    public BarVO getBarVO() {
        //测试过没问题的
        List<ProductsBarVO> list = productsMapper.findAllProductBarVO();

        //定义两个集合
        List<String> names = new ArrayList<>();
        List<Integer> values = new ArrayList<>();
        //for循环遍历给数组
        for(ProductsBarVO productsBarVO : list){
            names.add(productsBarVO.getName());
            values.add(productsBarVO.getCount());
        }
        //定义个BarVo
        BarVO barVO = new BarVO();
        barVO.setNames(names);
        barVO.setValues(values);
        return barVO;

        //接着来个测试
    }

    //PieVO返回一个集合,实现ProductsService中的getPieVO方法
    @Override
    public List<PieVO> getPieVO() {
        //测试过没问题的
        List<ProductsBarVO> list = productsMapper.findAllProductBarVO();
        List<PieVO> pieVOList = list.stream()
                .map(e -> new PieVO(
                        e.getCount(),
                        e.getName()
                )).collect(Collectors.toList());
        return pieVOList;
    }

    @Override
    public BarVO getBarVO(List<ProductsBarVO> list) {
        //测试过没问题的
//        List<ProductsBarVO> list = productsMapper.findAllProductBarVO();

        //定义两个集合
        List<String> names = new ArrayList<>();
        List<Integer> values = new ArrayList<>();
        //for循环遍历给数组
        for(ProductsBarVO productsBarVO : list){
            names.add(productsBarVO.getName());
            values.add(productsBarVO.getCount());
        }
        //定义个BarVo
        BarVO barVO = new BarVO();
        barVO.setNames(names);
        barVO.setValues(values);
        return barVO;

        //接着来个测试
    }
}

6）ProductsServiceTest.java

package com.task.service;import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
class ProductsServiceTest {

    @Autowired
    private ProductsService service;
    @Autowired
    private ProductsMapper mapper;
    //测试getBarVO()
    @Test
    void getBarVO() {
        BarVO barVO = service.getBarVO();
        int i = 0;
    }

    @Test
    void getBarVO2() {
        List<ProductsBarVO> list = mapper.findColorNumBarVO();
        BarVO barVO = service.getBarVO(list);
        int i = 0;
    }
}

7）productsController.java

package com.task.controller;
@Controller
public class ProductsController {

    @Autowired
    private ProductsService productsService;

    @Autowired
    private ProductsMapper mapper;

    @RequestMapping("/barVO")
    @ResponseBody       //返回的是数据所以加上ResponseBody
    public BarVO getBarVO(){    //把数据传到前台
        return productsService.getBarVO();
    }

    @RequestMapping("/pieVO")
    @ResponseBody       //返回的是数据所以加上ResponseBody
    public List<PieVO>  getPieVO(){    //把数据传到前台
        return productsService.getPieVO();
    }

    @RequestMapping("/barVO2")
    @ResponseBody       //返回的是数据所以加上ResponseBody
    public BarVO  getBarVO2(){    //把数据传到前台
        List<ProductsBarVO> list = mapper.findColorNumBarVO();
        return productsService.getBarVO(list);
    }
}

 8）可视化展示