码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-09-30 17:50:44      阅读:167      评论:0      收藏: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;

 

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

标签:

原文地址:http://www.cnblogs.com/Damon-Luo/p/5924229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!