SSM集成Echarts的简单使用

灰太狼 2022-01-22 21:21 502阅读 0赞

# 首先搭建好SSM环境 #

此处不是重点，如果不会请自行百度查阅资料。

# domain层 #

public class User {
    
       private int id;
       private String name;
       private int age;
       private int id;
       private String name;
       private int age;
    #省略getter/setter
    }

# dao层 #

public List<Map<String, Object>> queryForList();

# service层 #

public List<Map<String, Object>> queryForList() {
            return userDao.queryForList();
        }

# controller层 #

@Controller
    public class EchartsController {
    
        @Autowired
        private UserService userService;
    
        @GetMapping("/toBar")
        public String toBar(HttpServletRequest request, Model model) {
            return "echarts/myecharts";
        }
    
        @RequestMapping("/queryForList")
        @ResponseBody
        public List<Map<String, Object>> queryForList() {
            List<Map<String, Object>> lists = userService.queryForList();
    
            for (Map<String, Object> map : lists) {
                for (String s : map.keySet()) {
                    System.out.print("age: " + map.get(s) +" ");
                }
            }
    
            return lists;
        }
    
    }

# myecharts.jsp #

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
    
    <%
        pageContext.setAttribute("path", request.getContextPath());
    %>
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
    <h3>
        <a class="btn btn-primary" href="${path}/">返回首页</a>
    </h3>
    
    <div id="main" style="width:600px; height:400px;"></div>
    
    <script type="text/javascript">
        $(function () {
            // 初始化
            var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；
    
            // 配置图标参数
            var options = {
                title: {
                    text: '姓名和年龄关系图之柱状图',
                    show: true, // 是否显示标题
                    subtext: '测试数据',
                    textStyle: {
                        fontSize: 18 // 标题文字大小
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['年龄']
                },
                // X轴
                xAxis: {
                    data: [] // 异步请求时,这里要置空
                },
                // Y轴
                yAxis: {},
                series: [{
                    name: '年龄',
                    type: 'bar', // 设置图表类型为柱状图
                    data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
                }]
            };
            // 给图标设置配置的参数
            myChart.setOption(options);
            myChart.showLoading(); // 显示加载动画
    // 异步请求加载数据
            $.ajax({
                url: '${pageContext.request.contextPath}/queryForList',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var names = [];
                    var ages = [];
                    $.each(data, function (index, obj) {
                        names.push(obj.name);
                        ages.push(obj.age);
                    })
    
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                        legend: {
                            data: ['年龄']
                        },
                        xAxis: {
                            data: names
                        },
                        series: [{
                            name: '年龄',
                            type: 'bar', // 设置图表类型为柱状图
                            data: ages // 设置纵坐标的刻度
                        }]
                    });
                }
            });
        });
    </script>
    
    
    
    <div id="pid-div" style="width:600px; height:400px;"></div>
    
    <script type="text/javascript">
        $(function () {
            var myChart = echarts.init($('#pid-div')[0]);
            var option = {
                title: {
                    text: '姓名和年龄关系图之饼图',
                    subtext: '测试数据',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%', // 饼状图的大小
                        center: ['50%', '60%'], // 饼状图的位置
                        data: [],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.showLoading(); // 显示动画
    
            $.ajax({
                url: '${pageContext.request.contextPath}/queryForList',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    var names = [];
                    var ages = [];
                    $.each(data, function (index, obj) {
                        names.push(obj.name);
                        ages.push({name: obj.name, value: obj.age});
                    })
    
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                        legend: {
                            data: names
                        },
                        series: [{
                            name: '年龄',
                            type: 'pie', // 设置图表类型为柱状图
                            data: ages // 设置纵坐标的刻度
                        }]
                    });
                }
            });
        });
    </script>
    
    
    </body>
    </html>

# 效果图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjUyOTE3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjUyOTE3_size_16_color_FFFFFF_t_70]: /images/20220123/cb41e14388344ab19a949b93ab2546a3.png