Java语言中,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,还不太好,仅供大家参考,有问题一起交流。