欢迎访问优讯网!
您当前的位置:首页 > 爱编程

SSM整合Echarts绘制统计图Demo Echarts统计插件简单使用

时间:2019-04-23 14:41:55  来源:优讯网  作者:小卡司  浏览次数:
SSM整合Echarts绘制统计图Demo Echarts统计插件简单使用  项目需要一个统计图的页面,该页面能够体现多个数据分类的统计分析展示,并要求能够自动生成统计文档提供文档的下载,今天先来试试第一步,SSM整合Echarts动态加载后台数据实现统计分析的一个小Demo,不是很复杂,有同样需求的小伙伴可以参考一下!

首先我们需要下载相应的JS文件,下载页面是:https://echarts.baidu.com/download.html,我选择的是下载的官方的Github库中的,打开incubator-echarts-master\incubator-echarts-master\dist目录中的echarts.min.js文件就是了。

下面就是具体的代码实现了:
静态页面 statistics.html

     <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div class="page-container">
        <div id="myChart" style="width: 600px;height:400px;"></div>
    </div>
<script th:inline="javascript">
jQuery(document).ready(function() {
        var myChart = echarts.init(document.getElementById('myChart'));
        var options = {
                title: {
                    text: '统计',
                    show: true, 
                    subtext: '数据',
                    textStyle: {
                        fontSize: 18 
                    }
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                xAxis: {
                    data: [] 
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'line', // 设置图表类型
                    data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
                }]
            };
            myChart.setOption(options);
            myChart.showLoading(); // 显示加载动画
            $.ajax({
                url: '../pledge/statisticsLine.do',
                type: 'post',
                dataType: 'json',
                success: function(data) {
                    var dateYears = [];
                    var numbers = [];
                    $.each(data.data, function(index, obj) {
                        dateYears.push(obj.text);
                        numbers.push(obj.id);
                    })
                    myChart.hideLoading(); // 隐藏加载动画
                    myChart.setOption({
                        legend: {
                            data: ['数量']
                        },
                        xAxis: {
                            data: dateYears
                        },
                        series: [{
                            name: '数量',
                            type: 'line', // 设置图表类型为折线图
                            data: numbers, // 设置纵坐标的刻度
                            label: {
                                  normal: {
                                      show: true,
                                      position: 'top',
                                      textStyle: {
                                        color: 'red'
                                      }
                                  }
                             }
                        }]
                    });
                }
            });
        });
</script>
控制器文件 PledgeController.java

    @RequestMapping(value = "/statistics.html")
    public String statistics(Model model,HttpSession session) {
        return "/pledge/statistics";
    }
    
    @RequestMapping(value = "/statisticsLine.do")
    @ResponseBody
    public String statisticsLine(HttpServletRequest request,
        HttpSession session, Model model, Pledge pledge, PageHelper page) {
            QueryResult<EntityList> pageResult = pledgeService.statisticsLine();
            String result = JSONUtilS.object2json(pageResult);
            return result;
    }

Service层 PledgeService.java

public QueryResult<EntityList> statisticsLine() {
        QueryResult<EntityList> result = new QueryResult<EntityList>();
        Map<String, Object> map = new HashMap<String, Object>();
        List<EntityList> data = pledgeMapper.statisticsLine();
        result.setData(data);
        return result;
    }

Mapper层 PledgeMapper.java

    List<EntityList> statisticsLine();

Mapper层 PledgeMapper.xml

<select id="statisticsLine" resultType="com.bjidit.mis.entity.EntityList">
    select DATE_FORMAT(register_date,'%Y') as text,
    COUNT(pledge_id) as id from pledge WHERE isdel=0 GROUP BY text ORDER BY text ASC;
</select>

实现效果:
SSM整合Echarts的效果
以上就是关于 SSM整合Echarts绘制统计图Demo Echarts统计插件简单使用 的全部内容了,喜欢的小伙伴别忘了点赞分享一下哦,关注优讯网,优讯有你更精彩!
来顶一下
返回首页
返回首页
推荐资讯
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
Python实现网站百度主动推送 python实现主动推送网站地图
Python实现网站百度主
相关文章
    无相关信息
栏目更新
栏目热门