JSP使用Echarts的最简单的例子

Echarts是百度的页面图表框架，使用其稍作配置就能在web上整出漂亮的图表。

本篇文章简单的介绍一下“JSP使用Echarts的最简单的例子“，例子图如下



关于echarts详细资料可以看这里：http://echarts.baidu.com/index.html

图表显示是需要数据的，但是其官网教程中为了演示方便直接在页面js中填入数据，如下面链接所示，周一、周二等数据都是在页面直接写好：
http://echarts.baidu.com/doc/example/line1.html
xAxis : [

{

type : 'category',

boundaryGap : false,

data : ['周一','周二','周三','周四','周五','周六','周日']

}

]

而我们更经常的要做的操作是从远程服务器将数据取出，放入图表。熟悉ajax的人，自然可以将上面的代码少做修改，但网上的例子太少，我这边简单贴一下

我的参考代码：

xAxis : [
{
type : 'category',
data :(function(){
var dataarr = [];
$.ajax({
async: false,  //这句必须加
method: 'post',
url:'${pageContext.request.contextPath}/<strong><span style="color:#ff6666;">GetMonthServlet</span></strong>',
dataType:"json",
success:function(data) {
dataarr = data.<strong><span style="color:#ff6666;">month</span></strong>;
}
});
return dataarr;
})()
}
]

</pre><p></p><p>其中的GetMonthServlet是自己编写的一个提供数据的servlet，片段代码如下：</p><p></p><pre name="code" class="java">	public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String[] months = {"1","2","3","4","5","6"};

String json = JSONArray.fromObject(months).toString();
json = "{\"month\": " + json + "}";
System.out.println(json);
response.getWriter().println(json);
}

使用了JSONArray工具，将数组months转换成了符合标准的json字符串，如下所示：

{"month": ["1","2","3","4","5","6"]}

然后在页面端使用data.month取得["1","2","3","4","5","6"]作为echarts的data所需要的数据。

其他：

实际上你也可以不用json工具，完全自己手写得到上述格式化字符串。

项目参考代码：

有一个MyEclipse的参考代码似乎传不上来,只好传到资源哪里了：
http://download.csdn.net/detail/zhrubin/8748363