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是一个工具类,假设有不懂的看我之前的博客,上面有源代码

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