数据可视化框架ECharts之通过ajax动态绑定数据

在上一篇教程中，我们通过ECharts实现了数据可视化的饼图展示，只不过数据都是写死的。实际情况中，数据应该是通过处理或者是从数据库中取出来的。所以这一篇我们写一个通过ajax来请求后台数据，然后将其通过饼图显示出来的Demo。

工具是eclipse+Tomcat容器，前台html展示，通过ajax向servlet请求数据库中的数据，然后servlet通过jdbc取出数据以json格式返回给前台，前台再绑定数据。

json数据格式如下：[{"name":"其他","value":200},{"name":"推荐","value":2000},{"name":"相关阅读","value":500},{"name":"频道","value":300}]

数据表如下

定义与数据表相同的模型类demo.java

public class Demo {

private String name;

private int value;

public Demo(String name, int value) {

super();

this.name = name;

this.value = value;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getValue() {

return value;

}

public void setValue(int value) {

this.value = value;

}

}

定义数据库操作类获取数据库里的数据 DbOperate.java

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

import Model.Demo;

public class DbOperate {

private static String url = "jdbc:mysql://localhost:3306/dir?rewriteBatchedStatements=true";//连接字符串

private static String user = "root";//用户名

private static String password = "";//密码

public List<Demo> getDemo() throws Exception {

Class.forName("com.mysql.jdbc.Driver");//加载驱动

Connection conn = DriverManager.getConnection(url, user, password);//获得数据库连接

List<Demo> list = new ArrayList<Demo>();//定义list

Statement s = null;

String sql = "select * from demo";//sql语句

s = conn.createStatement();

ResultSet rs = s.executeQuery(sql);

while (rs.next()) {

list.add(new Demo(rs.getString("name"), rs.getInt("value")));//将对象放入list

}

if (s != null) {

s.close();

}

if (conn != null) {

conn.close();

}

return list;//返回list

}

}

定义servlet接收请求并返回数据 DataProcessing.java

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import Db.DbOperate;

import Model.Demo;

import com.alibaba.fastjson.JSON;

/**

* Servlet implementation class DataProcessing

*/

@WebServlet("/DataProcessing")

public class DataProcessing extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

*/

public DataProcessing() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

List<Demo> list;//定义list

try {

list = new DbOperate().getDemo();//将数据库中的数据赋给list

String jsonArr = JSON.toJSONString(list);//将list转为json

response.setCharacterEncoding("UTF-8");//设定编码

response.getWriter().print(jsonArr);//将json返回给前台

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

由前一篇文章我们知道，数据是由option对象中的series数组里的data数组决定的，而图例是由option对象中的legend对象里的data决定的，所以我们先定义一个数组和一个对象来接收后台传过来的数据。

var dataArray = [];

var legendData = [];

然后ajax向后台发起请求

$.ajax({

async : false,//是否异步，这里我们选择同步

cache : false,//不启用缓存

type : 'POST',//以post方式请求

dataType : "json",//数据格式是json

url : "/Demo/DataProcessing",//请求的servlet路径

error : function() {//请求失败后处理函数

alert('请求失败');

},

success : function(data) { //请求成功后处理函数

var str = JSON.stringify(data);//收到的data是json对象，所以要转成json字符串

var array = JSON.parse(str);//json字符串转数组

for (i = 0; i < array.length; i++) {

var dataObj = {//定义数据对象，里面包括value和name

value : 0,

name : ''

}

dataObj.name = array[i].name;//收到数据里的name赋给dataObj对象里的name属性

dataObj.value = array[i].value;//收到数据里的value赋给dataObj对象里的value属性

dataArray[i] = dataObj;//将处理后的数据对象赋给数据对象数组

legendData[i] =array[i].name; //图例数据的赋值

}

}

});

最后还是定义option，将dataArray和legendData放入其中

option = {

title : {

text : '阅读来源分析',

subtext : '',

x : '200',

textStyle : {

fontSize : 30,

align : 'center',

lineHeight : 56,

}

},

tooltip : {

trigger : 'item',

formatter : "{a} <br/>{b} : {c} ({d}%)"

},

legend : {

orient : 'vertical',

left : 'left',

data : legendData,

},

series : [ {

name : '阅读来源分析',

type : 'pie',

radius : '80px',

center : [ '20%', '20%' ],

data : dataArray,

itemStyle : {

normal : {

label : {

show : true,

formatter : '{b}：{d}%',

position : 'outside'

},

labelLine : {

show : true

}

},

emphasis : {

shadowBlur : 10,

shadowOffsetX : 0,

shadowColor : 'rgba(0, 0, 0, 0.5)'

}

}

} ]

};

demo.setOption(option);

这样通过ajax动态绑定数据就完成了

通过火狐浏览器的开发者工具可以看出，我们访问网页时，网页会提交一个指向http://localhost:8080/Demo/DataProcessing的请求，这就是servlet的地址，响应的是json格式的数据

由于不能上传附件，所以Demo的所有代码可以私信获取，谢谢