zoukankan      html  css  js  c++  java
  • 基于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;
  • 相关阅读:
    docker基本命令
    vscode 保存提示运行"XXX"的保存参与者: 快速修复
    Vue 2.6 插槽
    代码大全-PartOne-变量命名
    Axure 8.0.1.3388 注册码 授权码 破解
    乱七八糟记一下乱七八糟的碎片化知识
    JavaScript需记的一些细节
    Python3.6问题
    python3.6- shape mismatch: objects cannot be broadcast to a single shape
    Angular+ng-zorro遇坑记
  • 原文地址:https://www.cnblogs.com/Damon-Luo/p/5924229.html
Copyright © 2011-2022 走看看