echarts图表连接oracle数据库

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lqfirstsummer/article/details/85218489

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

展开阅读全文

没有更多推荐了,返回首页