Echarts之柱状图动态加载json数据（前端JSP，后端SSM）简单明了！！！！

文件上传下载篇

阿里EasyExcel导入导出Excel表格篇

先上效果：

数据库设计：

实体类：（略）

sql语句：(mysql返回指定字段)

<select id="SumByDay" resultType="map">
     SELECT DATE_FORMAT(sm_data,'%Y-%m-%d') name , SUM(sm_inventory) value FROM salesmessage GROUP BY DATE_FORMAT(sm_data,'%Y-%m-%d');
  </select>

Controller：

 @Autowired
    TestSelectServiceImpl tssi;

 @RequestMapping(value = "/testchart" , method = {RequestMethod.POST, RequestMethod.GET})
    @ResponseBody
    public List<Salesmessage> TestChart(){

        List<Salesmessage> salesmessages1 = tssi.SumByDay();
  
        return salesmessages1;
    }

前端：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="static/echarts/echarts.min.js"></script>

    <script type="text/javascript">
     
        $(function(){
            ajaxtest();
        });

        function ajaxtest() {
            // alert("hahhahaha")
            $.ajax({
                async:false,
                url:'${pageContext.request.contextPath}/testchart',
                type:'POST',
                dataType : 'json',
                success:function (objects1) {
                    initChart(objects1);
                }
            });
        }

        function formatData(data) {

            var xAxis = [];
            var serData =[];

            for(var i = 0 ; i < data.length ; i++){
                xAxis.push(data[i].name);
                console.log(xAxis);
                serData.push(data[i].value);
                console.log(serData);
            }
            return {
                xAxis : xAxis,
                serData : serData,
            };
        }

        function initChart(objects1) {
            var dom = document.getElementById("chartmain");
            var myChart = echarts.init(dom);

            var option = {
                title: {
                    text: '用户消费预测',
                    textStyle: {
                        color: '#000'
                    }
                },
                backgroundColor: '#ccc',
                textStyle: {
                    color: '#000',
                },
                tooltip: {},
                legend: {
                    data: ['消费额'],
                    textStyle: {
                        color: '#000'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: formatData(objects1).xAxis,
                    axisLabel: {
                        interval: 0,
                        rotate: -30,
                    }

                },

                yAxis: {},
                series: [{
                    name: '消费额',
                    type: 'bar',
                    data: formatData(objects1).serData,
                }]
            };

            myChart.setOption(option, true);

        };

    </script>

</head>
<body>
<h2>测试页</h2>

<div style="width: 100%;height: 100%" id="chartmain"></div>

</body>
</html>

进击的小名

发布了17 篇原创文章 · 获赞 13 · 访问量 1140

私信关注

Echarts之柱状图动态加载json数据（前端JSP，后端SSM）简单明了！！！！

文件上传下载篇

阿里EasyExcel导入导出Excel表格篇

先上效果：

数据库设计：

实体类：（略）

sql语句：(mysql返回指定字段)

Controller：

前端：

猜你喜欢