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）可視化展示