echarts折线图实现今天十二个月数据统计

echarts折线图实现今天十二个月数据统计

首先引入JS

SQl

统计每年每个月的数据

 @Select("Select year(time) as Myear,Month(time) as Mtime, count(id) as Msize  FROM submit_info Group by Year(time),Month(time)")

实体类

public class Year {
private  Integer Mtime;

    public Integer getMyear() {
        return Myear;
    }
  
    public void setMyear(Integer myear) {
        Myear = myear;
    }

    private  Integer Myear;

    public Integer getMtime() {
        return Mtime;
    }

    public void setMtime(Integer mtime) {
        Mtime = mtime;
    }

    public Integer getMsize() {
        return Msize;
    }

    public void setMsize(Integer msize) {
        Msize = msize;
    }

    private  Integer Msize;
}

controller

@RequestMapping("/EasList")
    public String EasList() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy");
        Date date = new Date();
        //查询数据库每年每个月的数据
        List<Year> list = submitInfoService.EasList();
        Eas eas = new Eas();
        Map map = new HashMap();
        for (Year y : list
        ) {     //判断是不是今天的信息，是的话就将今天的每个月的数据查出来存进map
            if (y.getMyear() ==Integer.parseInt(sdf.format(date)))
                map.put(y.getMtime(), y.getMsize());

        }
        List<Integer> l = new ArrayList();
         //循环12次 代表12个月
        for (int i = 1; i <= 12; i++) {
            //判断每个月有没有数据
            if (map.get(i) != null && map.get(i) != "") {
                //有的话就把数据添加进去
                l.add(Integer.parseInt(map.get(i).toString()));
            } else {
                //没有就有默认给个0
                l.add(0);
            }
        }
        eas.setData(l);
        //Eas图表规定必要的一些参数 具体可以看官方文档
        eas.setName("社区回来人数");
        eas.setStack("总量");
        eas.setType("line");
        return JSON.toJSONString(eas);

    }

前端

   
<div id="main1" style="width: 100%;height:400px;">div>

<script src="../js/echarts.min.js">script>


<script type="text/javascript">
    $.getJSON('/EasList',{},function (data) {
        console.log(data)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '本年每月社区回来人数统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['社区回来人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value'
            },
            series: data
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
script>

效果