echarts图表连接oracle数据库

Java语言中，echarts柱形图与oracle数据库连接

echarts图表连接oracle数据库问题

echarts图表的界面效果很丰富，但与数据库连接时总有各种问题，本方法已经过亲自尝试，绝对能够正确连接，附上代码，与大家共勉。

代码

数据库连接类DBManager.java.
数据库连接类百度上有很多，大家可直接搜到源码，这里就不再说明了。
1.在echarts官网上找到想要的柱形图的代码，复制到jsp页面上

<div id="echarts-pic" style="width:50%;height:200%;">
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts-pic'));

// 指定图表的配置项和数据
option = {
	color : [ '#9ffba6' ],
	tooltip : {
		trigger : 'axis',
		axisPointer : { // 坐标轴指示器，坐标轴触发有效
			type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
		}
	},

	grid : {
		left : '1%',
		right : '4%',
		bottom : '7%',
		top : '10%',
		containLabel : true
	},
	xAxis : [ {
		type : 'category',
		data : x轴数据,
		axisTick : {
			alignWithLabel : true
		},
		axisLabel : {
			show : true,
			interval : 0,
			rotate : -30,
			textStyle : {
				color : '#000'
			}
		},
	} ],
	yAxis : [ {
		type : 'value',
		axisLabel : {
			show : true,
			textStyle : {
				color : '#000'
			}
		},
	} ],
	series : [ {

		type : 'bar',
		barWidth : '25',
		label : {
			normal : {
				show : true,
				position : 'top'
			}
		},

		data : y轴数据,

	} ]
};
myChart.clear();
myChart.setOption(option, true);
window.addEventListener('resize', function() {
	myChart.resize();
});

</script>
</div>

2.定义实体类Show.java（根据自己的实际需求定义，不再附上了）
3.定义Dao类：AjaxDao,java

public class AjaxDao {
//获取进行数据库操作的工具类（包含数据库连接的一些具体信息）
	private DBManager dbManager = new DBManager();
	
	//从数据库中查询具体的信息
	public List<Show> selectCc() {
		//用来接收数据库查询到的结果信息
		List<Show> list = new ArrayList<Show>();
		//定义具体的查询语句
		String sql = "select * from show_cc";
		Connection connection = dbManager.get_con();
		try {
			ResultSet rs = dbManager.executeQuery(sql);
			while (rs.next()) {
				String glasses = rs.getString("glasses");
				String num= rs.getString("num");
				//定义接受信息的show_cc类
				Show show = new Show();
				show.setGlasses(glasses);
				showCd.setNum(num);
				list.add(show);
				
			}
			rs.close();
			dbManager.releaseSource();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
	
}

4.定义servlet类

public class AjaxServlet extends HttpServlet {
	/**可以接收，前台的请求，进行处理，返回查询到的数据库中的一些数据
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		//通过获取，URL中不同的action参数的值，进行判断执行不同的方法
		String action = request.getParameter("action");
		List<Show> list = new ArrayList<Show>();
		if (action.equals("show_cc")) {
			AjaxDao ajaxDao = new AjaxDao();
			list = ajaxDao.selectCc();
		//	System.out.println("查询到的信息为：" + list);
		}
		
		PrintWriter out = response.getWriter();
		JSONArray json = JSONArray.fromObject(list);
		out.print(json);
		out.flush();
		out.close();
	}

}

5.配置web.xml
6.Ajax获取Jason数据

function ajax(){
	
	$.ajax({
		type:"post",
		async:false,
		url:"******?action=show_cc",//使用自己配置的url
		data: {},
        dataType: "json",
        success: function(result){
            if(result){
            	var show_cc_array = eval(result);
                for(var i = 0 ; i < show_cc_array .length; i++){
                	glasses_x.push(show_cc_array [i].glasses);
                	num_y.push(show_cc_array [i].num);
                }
            }
        },
        error: function(errMsg) {
            alert("Ajax获取数据出错了！"+ errMsg);
        }
	});
	return glasses_x,num_y;
}

在jsp页面调用方法，并将相应的数据对应到页面效果的相应位置上。
效果如下：

第一次写csdn，还不太好，仅供大家参考，有问题一起交流。