基於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;