SpringBoot+echart实现柱状图和饼状图

---

前言

信息时代随着数据量不断增多，图表化显示数据显得尤为重要，项目中需要多样化展示数据，也是必不可少的模块

---

一、Echart

链接: Apache ECharts

1.引入Echarts

npm安装：npm install echarts --sav
引入：import * as echarts from ‘echarts’;

cdn: https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.common.js

2.示例:

可直接进入示例选择你中意的数据展示模板

点击进入之后可以编辑出你想要的效果后再放进你的前端模块内

二、整合SpringBoot

1.引入库

cdn获取:

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.common.js"></script>

2.前端模块

前端指定一个盒子给定一个id;

<div id="main" style="width: 600px;height:400px;"></div>

展示数据我们需要从后端传值过来通过异步获取
name是列名(模块名)，value是值，跟键值对一个意思

$.ajax({
            url:'/getAll',
            type:'get',
            datatype:'json',
            success:function (data){
                if (data.length>0){
                    var name=[];
                    var value=[];
                    for (let i = 0; i < data.length; i++) {
                       name.push(data[i].name);
                        value.push(data[i].count);
                    }
                    
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom, 'dark');
                    var option;

                    option = {
                        xAxis: {
                            type: 'category',
                            data: name
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: value,
                                type: 'bar'
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                }
                }
        });

3.数据库信息

后端接口直接传递全部信息就可以，异步请求成功后的回调函数

4.柱状图:

5.饼状图:

饼状图传参是对象数组，需要特定的格式;

饼状图需要的数据结构:

树状图需要的数据结构:

可以看出饼状图需要的是对象数组，而柱状图只需要数组即可

6.饼状图数据集传递

饼状图需要的是一个数组内包含键值对方式的对象集合、我们可以联想到后端的数据结构就是一个List集合内嵌套一个Map集合；

代码如下:

	@RequestMapping("/getAllretenrJson")
    @ResponseBody
    public ArrayList<Map<String,String>> getAllOnJson(){
        //数组集合嵌套键值对集合
        ArrayList<Map<String,String>>list=new ArrayList<>();
        //查询所有数据
        List<Baga> bagaList = bagaService.list();
        for (int i = 0; i < bagaList.size(); i++) {
            HashMap<String,String>map=new HashMap<>();
            //name为键
            map.put("name",bagaList.get(i).getName());
            //value为值
            map.put("value",bagaList.get(i).getCount().toString());
            //存入list
            list.add(map);
        }
        return list;
    }

异步函数:

$.get({
            url:'getAllretenrJson',
            type:'get',
            datatype:'json',
            success:function (data){
                var chartDom_tow = document.getElementById('main_tow');
                var myChart_tow = echarts.init(chartDom_tow, 'dark');
                var option_tow;

                option_tow = {
                    series: [
                        {
                            type: 'pie',
                            data:data
                        }
                    ]
                };
                option_tow && myChart_tow.setOption(option_tow);
            }
        })

最后数据成功展示:

---