基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)

<script type="text/javascript">
        $().ready(function() {
            var myChart = echarts.init(document.getElementById(‘main‘));
            //图表显示提示信息
            myChart.showLoading();
            //定义图表options
            option = {
                tooltip : {
                    trigger : ‘axis‘,
                    axisPointer : { // 坐标轴指示器,坐标轴触发有效
                        type : ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘
                    }
                },
                legend : {
                    data : []
                },
                grid : {
                    left : ‘3%‘,
                    right : ‘4%‘,
                    bottom : ‘3%‘,
                    containLabel : true
                },
                xAxis : {
                    type : ‘value‘
                },
                yAxis : {
                    type : ‘category‘,
                    data : []
                },
                series : []
            };
            //通过Ajax获取数据
            $.ajax({
                type : "post",
                async : false, //同步执行
                url : "showEchartFoldBar.action",
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    if (result) {
                        //将返回的category和series对象赋值给options对象内的category和series
                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                        option.legend.data = result.legend;
                        option.yAxis.data = result.category;
                        var serisdata = result.series[0].data;
                        var datas = [];
                        for ( var i = 0; i < serisdata.length; i++) {
                            datas.push({
                                name : serisdata[i].name,
                                type : serisdata[i].type,
                                stack : serisdata[i].stack,
                                label : {
                                    normal : {
                                        show : true,
                                        position : ‘insideRight‘
                                    }
                                },
                                data : serisdata[i].data,
                            });
                        }
                        option.series = datas;
                        myChart.hideLoading();
                        myChart.setOption(option);
                    }
                },
                error : function(errorMsg) {
                    alert("图表请求数据失败啦!");
                }
            });

        });
    </script>
@RequestMapping("/showEchartFoldBar")
    @ResponseBody
    public EchartData FoldBarData() {
        List<String> legend = new ArrayList<String>();
        List<Visit> vis1 = visitBiz.findByCondition(new Visit(null, "星期一", null, null));
        for (Visit visit : vis1) {
            legend.add(visit.getName());
        }

        List<String> category = new ArrayList<String>();
        List<Visit> vis2 = visitBiz.findByCondition(new Visit(null,null, null,"邮件营销"));
        for (Visit visit : vis2) {
            category.add(visit.getWeek());
        }

        List<Map> serisData=new ArrayList<Map>();
        List<String> name = visitBiz.selectName();
        for (String str : name) {
            Map map =new HashMap();
            map.put("name",str);
            List<Visit> lis = visitBiz.findByCondition(new Visit(null, null, null, str));
            List<Long> data=new ArrayList<Long>();
            for (Visit visit : lis) {
                data.add(visit.getCount());
            }
            map.put("data", data);
            map.put("type", "bar");
            map.put("stack", "总量");
            serisData.add(map);
        }

        List<Series> series = new ArrayList<Series>();// 纵坐标
        series.add(new Series(null,null,serisData));
        EchartData data = new EchartData(legend,category, series);
        return data;
    }
public class Visit {
    private Integer id;

    private String week;

    private Long count;

    private String name;
时间: 2024-11-06 08:19:48

基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)的相关文章

基于SpringMVC框架项目Demo

Git地址:https://github.com/JavaWeb1024/SpringMVC 1.     框架简介: 为打造一套集群高可用的框架,集成的技术目前比较成熟,稳定.相关的知识点在网络上也可以很容易找到相关的知识,有问题就可以立即给予解决.框架没有集成前端,如果有需要,可以集成JSP或者前端框架(Freemarker or Velocity等),易于扩展.本系统主要针对的是后台程序,提供的Demo均已经运行成功,便于学习. 使用的技术包括 l   SpringMVC l   Myba

基于SpringMVC下的Rest服务框架搭建【1、集成Swagger】

基于SpringMVC下的Rest服务框架搭建[1.集成Swagger] 1.需求背景 SpringMVC本身就可以开发出基于rest风格的服务,通过简单的配置,即可快速开发出一个可供客户端调用的rest服务,通常这些服务要不就是用于手机app的开发,要不就是提供给第三方开发者使用,不管哪种情况,你都需要提供详细的说明给别人,而Swagger就是为这种情况而生的,通过在接口上的注解,生成可供第三方模拟测试和阅读的接口列表,既美观又使用,真是行走江湖之必备良药. [XmPlatform原创,转载的

基于maven从头搭建springMVC框架

0.准备工作 首先将eclipse和需要的插件准备好,例如maven插件,spring IDE插件. 1.建立maven下的webapp项目 1.新建一个maven项目,类型为webapp,如下图 2.然后给项目命名,加入groupId等 3.配置项目的发布目录,在 Deployment Assemly下,如图 2.配置Spring和Maven 1.配置pom.xml,添加如下包依赖.版本不一定要对应,后边可能会用到些新的包,缺少哪些包可以后续去百度然后加入到pom.xml中 <dependen

基于 ASP.NET Core 2.0 WebAPI 后台框架搭建(0) - 目录概述

概述 博主自毕业后,进公司就一直是以ASP.NET MVC 5.0 + MySQL 进行项目开发,在项目也使用了很多常用功能,如 WCF.SignalR.微信公众号API.支付宝API.Dapper等等,前端是大杂烩,如:Bootstrap.AmazeUI.EasyUI.Light7.WeUI等等.其实对于我们公司的项目来说,技术栈虽说不庞大,但五脏俱全,而且基于这一套技术,开发速度有保证.但是,作为一个有梦想的程序猿,必须与时俱进,因此无意中接触了.Net Core 2.0.听说它是开源的?它

基于 ASP.NET Core 2.0 WebAPI 后台框架搭建(4) - EF Core CodeFirst 数据库创建

概述 在 基于 ASP.NET Core 2.0 WebAPI 后台框架搭建(2) - EF Core (MySQL) CodeFirst 数据库迁移与依赖注入 一文中,我们介绍如何快速以CodeFirst快速搭建数据库,这一章,我们来完善一下创建数据库中可以添加的验证与约束. 微软爸爸官方文档:Entity Framework Core 数据库操作 (1) 数据库迁移  add-migration [任一名称,须唯一] (2) 更新数据库  update-database (3) 删除数据库迁

SpringMVC框架整理(二)

SpringMVC框架整理第二发,数据绑定流程,数据校验(错误信息国际化),拦截器,异常处理. 数据绑定流程(数据转换,数据格式化,数据校验) 1. Spring MVC 主框架将 ServletRequest  对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创建 DataBinder 实例对象 2. DataBinder 调用装配在 Spring MVC 上下文中的 ConversionService 组件进行数据类型转换.数据格式化工作.将 Servlet

基于Dubbo框架构建分布式服务 (二)

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方

基于Dubbo框架构建分布式服务 【转】

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方

springmvc框架简介

1.springmvc Spring  MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型. springmvc包括以下组件,主要有以下作用 1.前端控制器(DispatcherServlet)  (不需要开发) 接收用户请求,发送响应 2.处理器映射器(HandlerMapping)(不需要开发) 根据请求的url来查找handler 3.处理器适配器(Handle