echarts+ajax+ssh框架+mysql的简单应用

第一步：首先需要做的是引入echarts.min.js和jquery.min.js两个类库，大家可以从下面的链接下载，也可自行网上下载

http://download.csdn.net/detail/qq_33271690/9886480

第二步：在相应jsp的某处加入如下代码（具体不清楚的可以参考一下官网文档http://echarts.baidu.com/）

<!-- 引入 echarts.js --><script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script><script language="javaScript" type="text/javascript" src="echarts/jquery.min.js"></script><script type="text/javascript"> // 路径配置 require.config({ paths: { echarts : 'http://echarts.baidu.com/build/dist' } }); // 使用chart后面的bar与type="xxx"有关 require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' // 使用柱状图就加载bar模块，使用线性图就加载line模块，按需加载 ],  drewEcharts);function drewEcharts(ec){ console.log("1");        // 基于准备好的dom，初始化echarts实例        var myChart = ec.init(document.getElementById('main'));        console.log("2");        // 指定图表的配置项和数据        var option = {    tooltip : {    show : true    },            legend: {                data: ['进货量','进货量1']            },            xAxis: [{            type: 'category',            }],            yAxis: [{type : 'value'            }],            series: [{                "name": '进货量',                "type": 'bar',            },{                "name": '进货量1',                "type": 'line',            }]        };        // 使用刚指定的配置项和数据显示图表。        loadDATA(option);        myChart.setOption(option);}function loadDATA(option){$.ajax({type: "post",async: false,url: "${pageContext.request.contextPath}/getData",data: {},dataType: "json",success: function(result){if(result){                        //初始化option.xAxis[0]中的data                        option.xAxis[0].data=[];                        for(var i=0;i<result.length;i++){                          option.xAxis[0].data.push(result[i].carType);}                      //初始化option.series[0]中的data                        option.series[0].data=[];                        option.series[1].data=[];                        for(var i=0;i<result.length;i++){                          option.series[0].data.push(result[i].carSum);                          option.series[1].data.push(result[i].carSum);                        }}}});}</script><style type="text/css">        .table1{            border:1px solid #ddd;            width:900px;                    }        thead{            background-color:lightblue;        }    </style>

然后在body标签内需要一个div用来显示图表

<div id="main" style="width: 600px;height:400px;margin:50px 100px"></div>

第三步：在action、service、dao层

action:

public class EchartsAction extends ActionSupport{private StockListService stockListService;// 选择你自己的业务层，我的是StocklistServicepublic void setStockListService(StockListService stockListService) {this.stockListService = stockListService;}public String getData(){        HttpServletRequest request = ServletActionContext.getRequest();          HttpServletResponse response = ServletActionContext.getResponse();          try {              request.setCharacterEncoding("utf-8");              response.setCharacterEncoding("utf-8");         } catch (UnsupportedEncodingException e) {              e.printStackTrace();          }        //System.out.println("欢迎使用echartsAction");        List<StockList> list = stockListService.findByCount();String jsonArray = JSONArray.fromObject(list).toString();PrintWriter out;try {response.setContentType("aplication/json;charset=UTF-8");out = response.getWriter();out.println(jsonArray);out.flush();out.close();} catch (IOException e) {e.printStackTrace();}return null;}}

service:

@Overridepublic List<StockList> findByCount() {return stockListDao.findByCarTypeAndCarSum();}

dao：

// 因为表中字段较多，如果直接采用from StockList查询的话，在json数据传递的时候会出现延时加载的错误，所以是采用查询部分字段的方法解决这个问题// 注：需要在构造方法中创建相应的带参构造方法，如public StockList(String carType,int carSum){...}@Overridepublic List<StockList> findByCarTypeAndCarSum() {return this.getHibernateTemplate().find("select new ccc.hut.domain.StockList(carType,carSum) from StockList");}

第四步：需要在struts.xml配置一下

<action name="getData" class="echartsAction" method="getData"></action>

然后启动一下服务器

成功啦！！！这样就完成了，其实也蛮简单的嘛，哈哈！！