（傲娇的白狐）使用mybatis做前段统计图（麻烦写法） 

server层：
　　　　　　　　　　　　　　　　
year是所需年份 如2020年

public JsonData selvisityear(String year) {

        if(year==null){
            return JsonData.buildSuc("查询失败");
        }
        String[] split=null;
//      十二个月份
        List list=new ArrayList();
        for (int i = 1; i <=12 ; i++) {
//            定义月份
            String time=i+"";
            if(i<10){
                time="0"+i;
            }
//            split[i]=time;
            list.add(year+"-"+time+"-00");
//            list.add(time);
        }

        list.forEach(System.out::println);
        List<Object> visits= visitmapper.selvisityearr(list);

        visits.forEach(System.out::println);
        EchartsBean echartsBean=new EchartsBean();
        echartsBean.setSeriesData(visits);

        return JsonData.buildSuc(echartsBean);
    }

mybatis　　　　用foreach循环





<select id="selvisityearr" parameterType="list" resultType="Object">
        <foreach collection="list" item="time" open="" separator="UNION ALL" close="">
            select COUNT(1),visit_time from t_visit   where date_format(visit_time,'%Y-%m')=date_format(#{time},'%Y-%m')
        </foreach>
</select>




需要一个包来接收返回前端所需数据  注意返回前端需要JSON数据      例：EchartsBean


 




package com.zyk.pojo;

import java.util.List;

public class EchartsBean {

    //图例数据
    private List<String> legendData;
    //x轴数据
    private List<Object> xaxisData;
    //y轴数据
    private List<Object> yaxisData;
    //图表系列数据 (如果高度自定义 需要用到上面3个 属性)
    private List<Object> seriesData;


    public List<String> getLegendData() {
        return legendData;
    }

    public void setLegendData(List<String> legendData) {
        this.legendData = legendData;
    }

    public List<Object> getXaxisData() {
        return xaxisData;
    }

    public void setXaxisData(List<Object> xaxisData) {
        this.xaxisData = xaxisData;
    }

    public List<Object> getYaxisData() {
        return yaxisData;
    }

    public void setYaxisData(List<Object> yaxisData) {
        this.yaxisData = yaxisData;
    }

    public List<Object> getSeriesData() {
        return seriesData;
    }

    public void setSeriesData(List<Object> seriesData) {
        this.seriesData = seriesData;
    }
}




 


 


 


 


HTML代码   需要echarts.js 包




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet"   th:href="@{/layui/css/layui.css}" />
</head>
<body>
<div class="layui-form" style="width: 800px;margin-left: 30%" >
    <div class="layui-form-item">
        <label class="layui-form-label">
            年份
        </label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="年份"  id="year"/>
        </div>
        <button class="layui-btn" id="searchBtn">搜索</button>
    </div>
</div>
<div>
    <!-- 2. 创建饼状图的容器 -->
    <div style="width: 800px;height:500px;margin: auto;" id="pieContent"></div>
</div>
<!-- 1. 引入js文件 -->
<script type="text/javascript" th:src="@{/js/echarts.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"> </script>
<script type="text/javascript">
    //3 . 初始化echarts 对象
    var mychart = echarts.init(document.getElementById("pieContent"));
    layui.use(['laydate','jquery'],function(){
        var laydate = layui.laydate;
        var $ = layui.jquery;
        laydate.render({
            elem:"#year",
            type:'year',
            value:new Date()
        })

        //渲染 柱状图
        var option = {
            //标题内容
            title:{
                text:"月拜访量",    //标题
                left:'center'        //居中显示
            },
            color: ['#3398DB'],        //柱状图颜色

            //提示框组件
            tooltip : {
                trigger: 'axis',    //提示效果--坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            //x轴
            xAxis : [
                {
                    type : 'category',
                    data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {    //坐标轴刻度设置
                        alignWithLabel: true    //与标签对齐
                    }
                }
            ],
            //y轴
            yAxis : [
                {
                    type : 'value' //默认是value,适用于连续数据
                }
            ],

            //系列列表, 主要通过 type决定显示的样式
            series :
                {
                    name:'月拜访量',
                    type:'bar',
                    barWidth: '60%',
                    data:[]
                }
        };

        // 为搜索按钮绑定事件
        $("#searchBtn").click(function() {
            var year = $("#year").val();
            $.get("/visit/bar", {'year' : year}, function(rs) {
                if(rs.code == 200){
                    var data = rs.data;
                    console.log(data)
                    //填充图表系列数据    -- series.data 是一组json数据
                    //比如:[{name:"1月",value:2},{name:"2月",value:1},{name:"4月",value:4}]
                    option.series.data = data.seriesData;    //查看 浏览器控制台 key值是seriesData
                }
                mychart.setOption(option);
            },"json");
        });
    });
</script>
</body>
</html>




 


 




 







            

            
posted @ 
2020-08-08 14:34 
傲娇的白狐 
阅读(247) 
评论(0) 
 
收藏 
举报