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

基于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=http://www.mamicode.com/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=http://www.mamicode.com/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实现堆叠条形图的绘制(下篇)