引用Cdn

前端引用Echart的cdn

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

[]: https://echarts.apache.org/examples/zh/index.html “Echarts官网”

2gdcZV.png

根据需求选对应的图表

目的

2gwio8.png

从上图表中计算出各种类的数目数量，并绘制成饼图

传给前端的数据为对象数组

[{工具书：},{儿童读物},{}]……

后端

编写sql并编译

SELECT book_category,count(*) num FROM `book` GROUP BY book_category

在navicate中运行可查询结果

2gwRmt.png

编写pojo包下的CategoryCount类

pojo包下创建一个CategoryCount类来将上述的结果进行封装

package com.lyx.library.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author shkstart
 * @create 2021-06-08 21:23
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CategoryCount {
    private String category;
    private int count;
}

编写对应xml

<select id="countCategory"  resultMap="count">
    SELECT book_category,count(*) num FROM `book` GROUP BY book_category
</select>

<resultMap id="count" type="com.lyx.library.pojo.CategoryCount">
     <result column="book_category" property="category" jdbcType="VARCHAR" />
     <result column="num" property="count" jdbcType="INTEGER" />
</resultMap>

Controller

计算总书（包含未借的和被借阅的书籍）

@RequestMapping("/chart")
    public List<CategoryCount> chart(){

        List<CategoryCount> bookCategory = bookService.countCategory();
        List<CategoryCount> deleteBookCounts = deleteBookService.countCategory();
        ArrayList<CategoryCount> totalCounts = new ArrayList<>();
        ArrayList<CategoryCount> least = new ArrayList<>();
        if(bookCategory.size() > deleteBookCounts.size()){
            totalCounts = (ArrayList<CategoryCount>) bookCategory;
            least = (ArrayList<CategoryCount>) deleteBookCounts;
        }else if(bookCategory.size() < deleteBookCounts.size()){
            totalCounts = (ArrayList<CategoryCount>) deleteBookCounts;
            least = (ArrayList<CategoryCount>) bookCategory;
        }else if(bookCategory.size() == deleteBookCounts.size()){
            totalCounts = (ArrayList<CategoryCount>) bookCategory;
            least = (ArrayList<CategoryCount>) deleteBookCounts;
        }

        for (CategoryCount c:totalCounts){
            for (int i = 0; i < least.size(); i++) {
                if(c.getCategory().equals(least.get(i).getCategory())) {
                    c.setCount(c.getCount() + least.get(i).getCount());
                }
            }
        }
        return totalCounts;
    }

前端

划分区域

新建标签div

确定图表生成的位置

2gBqoV.png

编写js

通过Jquery封装好的ajax接收后端传来的List

并可以自行参考官方文档进行修改功能

注意:Echart中data的格式为[{value: ,name: },…]，需转换

<script type="text/javascript">
    $.ajax({
            type: 'POST',
            url: '/chart',
            data: {
                
            },
            success:function (data) {
                var list = [];
                for(i in data){
                    var one = {};
                    one.value = data[i].count;
                    one.name = data[i].category;
                    list.push(one);
                }
                var dom = document.getElementById("chart");
                var myChart = echarts.init(dom);
                var app = {};
                
                var option;
                
                
                
                option = {
                    title: {
                        text: '图书种类分析图',

                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'top',
                        top: 'bottom',

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: false},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '图书种类',
                            type: 'pie',
                            radius: [25, 140],
                            center: ['48%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 5
                            },
                            data: list
                        }
                    ]
                };
                
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
                
            }
        })




    
</script>

整体效果

2gsMPf.png