Echarts制作报表-Struts2与之交互

利用echarts制作报表问题 

第一步  导入两个基础文件

<script src="${pageContext.request.contextPath}/js/echarts.js"></script>  
 <script src="${pageContext.request.contextPath}/js/jquery.js"></script>   

第二部  创建一个div标签

  <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  

第三部 初始化 报表

 <script type="text/javascript">  
    // Step:3 conifg ECharts's path, link to echarts.js from current page.  
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径  
    require.config({  
        paths: {  
            echarts: './js'  
        }  
    });  
    var myChart ; 
    var eCharts; 
    // Step:4 require echarts and use it in the callback.  
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径  
    require(  
        [  
            //这里的'echarts'相当于'./js'  
         
            'echarts',  
            'echarts/chart/bar',  
            'echarts/chart/line',  
        ],  DrawEChart
       
    );
    //创建ECharts图表方法  
    function DrawEChart(ec) {  
        //--- 折柱 ---  
            //基于准备好的dom,初始化echart图表  
        myChart = ec.init(document.getElementById('mainBar')); 
        eCharts=ec; 
        //定义图表option  
        var option = {  
            //标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题  
            title: {  
                //主标题文本，'\n'指定换行  
                text: '2015年上海xx广场被关注数点赞量统计报表',  
                //主标题文本超链接  
                link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',  
                //副标题文本，'\n'指定换行  
                subtext: '上海会志信息科技有限公司 ',  
                //副标题文本超链接  
                sublink: 'www.igostar.com',  
                //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
                x: 'left',  
                //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
                y: 'top'  
            },  
            //提示框，鼠标悬浮交互时的信息提示  
            tooltip: {  
                //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'  
                trigger: 'axis'  
            },
            addDataAnimation:true,
            //图例，每个图表最多仅有一个图例  
            legend: {  
                //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                show: true,  
                //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
                x: 'center',  
                //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
                y: 'top',  
                //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  
                data: ['','']  //'被关注量','被点赞量'
            },  
            //工具箱，每个图表最多仅有一个工具箱  
            toolbox: {  
                //显示策略，可选为：true（显示） | false（隐藏），默认值为false  
                show: true,  
                //启用功能，目前支持feature，工具箱自定义功能回调处理  
                feature: {  
                    //辅助线标志  
                    mark: {show: true},  
                    //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  
                    dataZoom: {  
                        show: true,  
                         title: {  
                            dataZoom: '区域缩放',  
                            dataZoomReset: '区域缩放后退'  
                        }  
                    },  
                    //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
                    dataView: {show: true, readOnly: true},  
                    //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
                    magicType: {show: true, type: ['line', 'bar']},  
                    //restore，还原，复位原始图表  
                    restore: {show: true},  
                    //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
                    saveAsImage: {show: true},
                    selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字    
                        show:true,//是否显示    
                       // danielinbiti:true,
                        title:'显示本年', //鼠标移动上去显示的文字    
                        icon:'${pageContext.request.contextPath}/images/year.png', //图标    
                        option:{},    
                        onclick:function(option1) {//点击事件,这里的option1是chart的option信息                          
                        queryYearData();//这里可以加入自己的处理代码，切换不同的图形    
                              }    
                         }
                    ,
                    selfButtons1:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字    
                            show:true,//是否显示    
                            title:'显示本月', //鼠标移动上去显示的文字    
                            //danielinbiti:true,
                            icon:'${pageContext.request.contextPath}/images/mouth.jpg', //图标    
                            option:{},    
                            onclick:function(option1) {//点击事件,这里的option1是chart的option信息                          
                            queryWeekData();//这里可以加入自己的处理代码，切换不同的图形    
                                  }    
                             },
                   selfButtons2:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字    
                                 show:true,//是否显示    
                                 title:'显示本周', //鼠标移动上去显示的文字 
                                 //danielinbiti:true,
                                 icon:'${pageContext.request.contextPath}/images/zhou.png', //图标    
                                 option:{},    
                                 onclick:function(option1) {//点击事件,这里的option1是chart的option信息                          
                                  queryWeekData();//这里可以加入自己的处理代码，切换不同的图形    
                                       }    
                                  }
                }  
            },  
            //是否启用拖拽重计算特性，默认关闭(即值为false)  
          //  calculable: true,  
            //直角坐标系中横轴数组，数组中每一项代表一条横轴坐标轴，仅有一条时可省略数值  
            //横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型  
            xAxis: [  
                {  
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                    show: true,  
                    //坐标轴类型，横轴默认为类目型'category'  
                    type: 'category',  
                    //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行  
                    data: ['0']  //'1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'
                }  
            ],  
            //直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值  
            //纵轴通常为数值型，但条形图时则纵轴为类目型  
            yAxis: [  
                {  
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                    show: true,  
                    //坐标轴类型，纵轴默认为数值型'value'  
                    type: 'value',  
                    max:500,
                    min:0,
                    // type: 'category', 
                   // scale:true,
                    //分隔区域，默认不显示  
                    splitArea: {show: true},
                    data: ['0']  //'500','1000','1500','2000','2500','3000','3500','4000','4500','5000','5500','6000'
                }  
            ],  
              
            //sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构；对象内包含对象  
            series: [  
                {  
                    //系列名称，如果启用legend，该值将被legend.data索引相关  
                    name: '被关注量',  
                    //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
                    type: 'bar', 
                    itemStyle:{
                    normal:{
                    color:'#00CE98',
                    }
                    },
                    //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
                    data: [0],  //500, 1000, 1200,1800, 2000, 2500, 3000,4000,5000, 4800, 5500,5300
                    //系列中的数据标注内容  
                    markPoint: {  
                        data: [  
                            {type: 'max', name: '最大值'},  
                            {type: 'min', name: '最小值'}  
                        ]  
                    },  
                    //系列中的数据标线内容  
                    markLine: {  
                        data: [  
                            {type: 'average', name: '平均值'}  
                        ]  
                    }  
                } ,  
                {  
                    //系列名称，如果启用legend，该值将被legend.data索引相关  
                    name: '被点赞量',  
                    //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。  
                     itemStyle:{
                    normal:{
                    color:'#F07BAF',
                    }
                    },
                    type: 'bar',  
                    //系列中的数据内容数组，折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度，并且他们间是一一对应的。数组项通常为数值  
                    data: [0],  //3000, 3500, 3800, 4000, 4500, 4700, 4700, 4900, 5500, 5900,6000, 6800
                    //系列中的数据标注内容  
                    markPoint: {  
                        data: [  
                            {type: 'max', name: '最大值'},  
                            {type: 'min', name: '最小值'}  
                        ]  
                    },  
                    //系列中的数据标线内容  
                    markLine: {  
                        data: [  
                            {type: 'average', name: '平均值'}  
                        ]  
                    }  
                }   
            ]  
        };  
              
        //为echarts对象加载数据              
       // myChart.setOption(option);  
        myChart.setOption(option); //先把可选项注入myChart中  
        myChart.hideLoading();  
        getChartData();//aja后台交互   
    }   
    </script> 

第四步 异步获取数据

<script type="text/javascript">  
        function getChartData() {  
            //获得图表的options对象  
            var option = myChart.getOption();  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url: '${pageContext.request.contextPath}/mallInfoPC.html?method:findMallInfoLikeAndAttention', 
                //url: '${pageContext.request.contextPath}/floorInfo.html?method:findFloorInfoCondition',


              data : {                
                },   
                dataType : "json", //返回数据形式为json  
                success : function(result) {  
                //alert(resul.toString());
                //console.log(result);
                //console.log(result.category[0]);   
                /*{"dataInfo":{
                "category":["周一","周二","周三","周四","周五","周六","周日"],
                "legend":["最高气温"],
                "series":[{"data":[21 ,23,28,26,21,33,44],"name":"最高气温","type":"line"}]}}*/
               
                /* {"dataInfo":{
                "legend":{"datas":["被关注量","被点赞量"],"locationX":"center","locationY":"top","show":true},
                "series":[{"data":[500,1000,1200,1800,2000,2500,3000,4000,5000,4800,5500,5300],"name":"被关注量","type":"bar"},{"data":[3000,3500,3800,4000,4500,4700,4700,4900,5500,5900,6000,6800],"name":"被点赞量","type":"bar"}],
                "xAxis":{"data":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"show":true,"type":"category"},
                "yAxis":{"data":["500","1000","1500","2000","2500","3000","3500","4000","4500","5000","5500","6000"],"show":true,"type":"value"}}} */
                //console.log(result.dataInfo.legend[0]);
                    if (result) {  
                    /* console.log(result.dataInfo.legend.datas);
                    console.log(result.dataInfo.yAxis.data);
                    console.log(result.dataInfo.series[0].data);
                    console.log(result.dataInfo.series[1].data); */
                        option.legend.data = result.dataInfo.legend.datas;  
                        option.xAxis[0].data = result.dataInfo.xAxis.data; 
                        option.yAxis[0].data = result.dataInfo.yAxis.data; 
                        option.yAxis[0].max=8000;
                        option.series[0].data = result.dataInfo.series[0].data;
                        option.series[1].data = result.dataInfo.series[1].data; 
                        myChart.hideLoading();  
                        myChart.setOption(option);   
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，大爷，图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });    
        }  
        
        function queryYearData(){
        //获得图表的options对象  
           var option = myChart.getOption();  
           //通过Ajax获取数据  
           $.ajax({  
               type : "post",  
               async : false, //同步执行  
               url: '${pageContext.request.contextPath}/mallInfoPC.html?method:findMallInfoLikeAndAttention', 
              data : {                
               },   
               dataType : "json", //返回数据形式为json  
               success : function(result) {              
                   if (result) {     
                    myChart.clear();
                    //myChart.dispose();
                       option.legend.data = result.dataInfo.legend.datas;                         
                       option.xAxis[0].data = result.dataInfo.xAxis.data;                      
                       option.yAxis[0].data = result.dataInfo.yAxis.data;   
                       option.yAxis[0].max=8000;
                       option.series[0].data = result.dataInfo.series[0].data;                       
                       option.series[1].data = result.dataInfo.series[1].data; 
                       console.log(result.dataInfo.yAxis.data);
                       console.log( option.yAxis[0].data);
                       myChart.hideLoading();  
                       myChart.setOption(option);   
                   }  
               },  
               error : function(errorMsg) {  
                   alert("不好意思，大爷，图表请求数据失败啦!");  
                   myChart.hideLoading();  
               }  
           });    
       }
        
        function queryWeekData(){
        //获得图表的options对象  
            var option = myChart.getOption();  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url: '${pageContext.request.contextPath}/mallInfoPC.html?method:findWeekMallInfoLikeAndAttention', 
              data : {                
                },   
                dataType : "json", //返回数据形式为json  
                success : function(result) {              
                    if (result) {     
                    myChart.clear();
                    //myChart.dispose();
                    console.log( option.yAxis[0].data);
                        option.legend.data = result.dataInfo.legend.datas;                         
                        option.xAxis[0].data = result.dataInfo.xAxis.data;                      
                        option.yAxis[0].data = result.dataInfo.yAxis.data;  
                        option.yAxis[0].max=800;
                        option.series[0].data = result.dataInfo.series[0].data;                       
                        option.series[1].data = result.dataInfo.series[1].data; 
                        console.log(result.dataInfo.yAxis.data);
                        console.log( option.yAxis[0].data);
                        myChart.hideLoading();  
                        myChart.setOption(option);   
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思，大爷，图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });    
        }
    </script>  

第五步  java代码的实现  

5.1 文件的配置

<action name="mallInfoPC" class="cn.huizhi.usermang.action.mallAction.mallInfoPCAction">
   <result name="success" type="json">
    <!--<param name="ignoreHierarchy">false</param> 
       <param name="contentType">text/html;charset=utf-8</param>-->
   </result> 
</action>

5.2 穿件实体类

<action name="mallInfoPC" class="cn.huizhi.usermang.action.mallAction.mallInfoPCAction">
   <result name="success" type="json">
    <!--<param name="ignoreHierarchy">false</param> 
       <param name="contentType">text/html;charset=utf-8</param>-->
   </result> 
</action>