（适合像我这样的新手使用）
最近学完了ECharts官方推出的视频教程，了解了常用表格的个性化定制方法，但却并没有真正将其应用到我们的项目（Java Web项目）中。官方的所有业务都是与数据可视化相关的，具体到每一种项目，对于新手来说，只能通过论坛、博客或第三方技术教程网站来学习。为了让大家尽快地将ECharts应用到项目中，我也通过边学边做的方式，与大家共同来探讨！
为了使我们更专注于后台与前台交互的实现，我使用的例子是官方的Get Started中的实例，可谓简单易懂。
1.创建数据表
首先创建数据库test，为了防止出现中文乱码，选择编码格式为utf8。
其次创建数据表bar，sql如下：
CREATE TABLE `bar` (
`name` varchar(20) DEFAULT NULL COMMENT '服装名称',`num` int(11) DEFAULT NULL COMMENT '对应数量'
) ENGINE=InnoDB DEFAULT CHARSET=utf8
2.建立Java Web Project
我使用的IDE是最新的eclipse MARS，首先新建项目Dynamic Web Project，命名为echarts_demo，其他的默认即可。
附：最终的项目结构
其次设置JRE、导包。如果直接Import我的项目，可能需要重新设置JRE的路径。使用Servlet的方式获取后台数据并使用AJAX更新JSP需要导入下面的包，否则会抛出ClassNotFoundException。
commons-beanutils-1.9.3.jar
commons-collections-3.2.2.jar
commons-lang-2.4.jar
commons-logging-1.2.jar
ezmorph-1.0.6.jar
json-lib-2.4-jdk15.jar
最后导入本次项目使用到的JS文件，echarts-all.js和jquery.js。
3.创建Bean对象
在src目录下新建包com.lgw.bean，并创建对象Bar，代码如下：
package com.lgw.bean;
public class Bar {
private String name; //服装名称
private int num; //对应件数
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
本例使用的是最原始也是最简单的JDBC的方式连接MysqL数据库，也是为了更专注于交互实现。
在src目录下新建包com.lgw.dao，并创建对象BarDao，代码如下：
package com.lgw.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.sqlException; import java.util.ArrayList; import com.lgw.bean.Bar; public class BarDao { /** * @author wen * * 查询所有数据 * @return 存放所有数据的线性表 */ public ArrayList<Bar> query() { ArrayList<Bar> barArr = new ArrayList<Bar>(); try { //JDBC方式连接MysqL数据库 Class.forName("com.MysqL.jdbc.Driver"); Connection conn = DriverManager.getConnection( "jdbc:MysqL://localhost:3306/test?characterEncoding=utf8","root",""); PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar"); ResultSet rs = stmt.executeQuery(); //将test表中的数据存储到线性表中 while(rs.next()) { Bar bar = new Bar(); bar.setName(rs.getString("name")); bar.setNum(rs.getInt("num")); barArr.add(bar); } //关闭连接 conn.close(); } catch (sqlException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } return barArr; } }
5.创建Servlet对象，实现服务器后台向前台JSP响应数据
在src目录下新建包com.lgw.servlet，并创建对象BarService，代码如下：
package com.lgw.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.lgw.bean.Bar;
import com.lgw.dao.BarDao;
import net.sf.json.JSONArray;
public class BarService extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException {
//创建DAO
BarDao barDao = new BarDao();
//从数据库里取数据
ArrayList<Bar> barArr = barDao.query();
//设置服务器响应时向JSP表示层传输数据的编码格式
resp.setContentType("text/html; charset=utf-8");
//ArrayList对象转化为JSON对象
JSONArray json = JSONArray.fromObject(barArr);
//控制台显示JSON
System.out.println(json.toString());
//返回到JSP
PrintWriter writer = resp.getWriter();
writer.println(json);
writer.flush();
//关闭输出流
writer.close();
}
}
需要了解的是ECharts前台可接受的数据格式是JSON，因此需要将ArrayList转化为JSONArray。另外，传输数据使用的方式是post，因此在AJAX中配置相应的传输类型。
6.配置web.xml在配置文件中注册servlet，并定义url-pattern，代码如下：
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>test.jsp</welcome-file> </welcome-file-list> <!-- 注册servlet --> <servlet> <servlet-name>barService</servlet-name> <servlet-class>com.lgw.servlet.BarService</servlet-class> </servlet> <servlet-mapping> <servlet-name>barService</servlet-name> <url-pattern>/bar.do</url-pattern> </servlet-mapping> </web-app>
这里最需要注意的是url-pattern，这和JavaScript代码中AJAX里的url属性对应。
7.最需要关心的一个步骤：编写JSP前台并简单配置ECharts
这里使用的就是官方的Get Started的实例，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello ECharts</title> <!-- 使用单文件引入的方式使用ECharts.JS --> <script src="echarts-all.js"></script> <script src="jquery.js"></script> </head> <body> <!-- DOM用来设置展示ECharts图表的区域 --> <div id="myDiv" style="height: 400px"></div> <script type="text/javascript"> function loadData(option) { $.ajax({ type : 'post',//传输类型 async : false,//同步执行 url : 'bar.do',//web.xml中注册的Servlet的url-pattern data : {},dataType : 'json',//返回数据形式为json success : function(result) { if (result) { //初始化xAxis[0]的data option.xAxis[0].data = []; for (var i=0; i<result.length; i++) { option.xAxis[0].data.push(result[i].name); } //初始化series[0]的data option.series[0].data = []; for (var i=0; i<result.length; i++) { option.series[0].data.push(result[i].num); } } },error : function(errorMsg) { alert("加载数据失败"); } });//AJAX }//loadData() var myChart = echarts.init(document.getElementById('myDiv')); var option = { tooltip : { show : true },legend : { data : [ '销量' ] },xAxis : [ { type : 'category' } ],yAxis : [ { type : 'value' } ],series : [ { name : '销量',type : 'bar' } ] }; //加载数据到option loadData(option); //设置option myChart.setOption(option); </script> </body>
将项目部署到tomcat，运行服务器后，在浏览器输入http://localhost:8080/echarts_demo/，可以看到成功的页面。
另附上我的Demo，大家可以尝试运行一下，欢迎指正！
http://download.csdn.net/detail/tgcxmxyz1011/9694411
