ECharts 与struts的后台交互之柱状图

ECharts主页：  http://echarts.baidu.com/index.html

ECharts-2.1.8下载地址：  http://echarts.baidu.com/build/echarts-2.1.8.zip

ECharts官方实例：  http://echarts.baidu.com/doc/example.html

ECharts官方API文档：  http://echarts.baidu.com/doc/doc.html

1、ECharts是百度的开源项目。在其官网上有非常多实例，我就不多废话刘，这里我们引用的是echarts-all.js 官网上下载。还有jquery的js这样就省去了官网上的这样的步骤

      // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就载入bar模块。按需载入
            ],
       当你引用了echarts-all.js之后上面的步骤就能够去掉了
       

2、前台代码例如以下

      新建一个div

       <div id="main2" style="height:400px"></div>

       当点击事件触发先吧可选项注入mychart中

       var myChart2 = echarts.init(document.getElementById('main2'));

        function createBar(){
        option2 = {
    title : {
        text: '练习',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    grid : {  
                    width : '50%'  
                },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'收入',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        }
   
    ]};
     myChart2.setOption(option2);
     myChart2.hideLoading();
    getChartData1();//ajax后台交互取得数据
       }
      function getChartData1() {  
            //获得图表的options对象  
            
            var option2 = myChart2.getOption();  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步运行  
                url : "<%=path%>/chart_lineData1",  
                dataType : "json", //返回数据形式为json  
                success : function(data) {               
                       
                        option2.xAxis[0].data = data.category;  
                        option2.series[0].data = data.series[0].data;  
 
                        myChart2.hideLoading();  
                        myChart2.setOption(option2);    
                   
                },  
                error : function(errorMsg) {  
                    alert("请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });  
        }
             
    </script>

3、后台代码

      首先新建一个类

     public class Series {
    
    public String name;  
      
    public String type;  
      
    public ArrayList<String> data;//
 
    public Series(String name, String type, ArrayList<String> arrayList) {
        this.name=name;
        this.type=type;
        this.data=arrayList;
    }

}

   注意get set方法

   接着上action的代码

         public String lineData1() {  
            this.collects=this.collectService.findAllCollects("1");//这是我从数据库取数据
            String m[]=new String[collects.size()];
            for(int i=0;i<collects.size();i++){
                m[i]=collects.get(i).getItemAmounts().toString();//数据封装成数组
            }
            List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"收入"}));//数据分组  
            List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标  
            List<Series> series = new ArrayList<Series>();//纵坐标   
            series.add(new Series("收入", "bar",new ArrayList<String>(Arrays.asList(m))));  
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("legend", legend);
            map.put("category", category);
            map.put("series", series);
            return Utils.ajaxJson(map);
        }

       这里我用的封装map集合的方式传递json,Utils.ajaxJson是一个工具类,假设有不懂的看我之前的博客,上面有源代码  

       到这里前后台的交互就完毕了,