echarts简单快速上手

ECharts是由百度前端技术部开发的，基于Javascript的数据可视化图表库，可用于展示各种报表、图标，开源前端项目。

上手也非常简单，下面是入门例子：

1.js导入：

<script type="text/javascript"src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>

2.js代码：

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  $(function(){
	
	//基于准备好的dom，初始化echarts实例
	 var myChart = echarts.init(document.getElementById('main'));
	   
	//发起异步请求
	   $.post("eCharts",{},function(json){
		   // 指定图表的配置项和数据
			 var option = {
			     title: {
			         text: 'ECharts 示例'
			     },
			     tooltip: {
			    	 show: true  
			     },
			     legend: {
			         data:['销量']
			     },
			     xAxis: {
			    	 type: 'category',
			         data: json.keys
			     },
			     yAxis: {},
			     series: [{
			         name: '销量',
			         type: 'bar', //设置图标类型的属性，折线图：line，柱状图：bar,饼图:pie                
			         data: json.data
			     }]
			 };
			 // 使用刚指定的配置项和数据显示图表。
			 myChart.setOption(option);
		 },"json");
})
</script>

3.java后端代码：

3.1servlet:

public class eCharts extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

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

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		try {
		
			String [] ags = null;//只是调用main方法
			List<String>  list =   Util.main(ags);
			
			//声明一个大小为list.size的数组集合
			String [] keys = new String[list.size()];
		
			for(int i =0;i<list.size();i++){
				keys[i] = list.get(i) ;
			}
			  //返回的数据
		    int [] arr = {1,2,3,4};
		    //JSON对象
		    JSONObject obj = new JSONObject();
		     obj.put("data", arr);
		     obj.put("keys", keys);
		    //输出
		    response.getWriter().write(obj.toString());
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

3.2访问数据库工具类：

public class Util {
	public static List<String> main(String[] args) throws SQLException {
		 Connection conn = null;
	     String sql;
	  
	     List<String> list = new ArrayList<>();
	     String url = "jdbc:mysql://localhost:3306/test?user=root&password=123456&useUnicode=true&characterEncoding=UTF8";
	     try {
	         // 之所以要使用下面这条语句，是因为要使用MySQL的驱动，所以我们要把它驱动起来，
	         // 可以通过Class.forName把它加载进去，也可以通过初始化来驱动起来，下面三种形式都可以
	         Class.forName("com.mysql.jdbc.Driver");// 动态加载mysql驱动
	     
	         // 一个Connection代表一个数据库连接
	         conn = DriverManager.getConnection(url);
	         // Statement里面带有很多方法，比如executeUpdate可以实现插入，更新和删除等
	         Statement stmt = conn.createStatement();
	         sql = "select * from student";
	        ResultSet  re =  stmt.executeQuery(sql);
	        while(re.next()){
	        	String  name =  re.getString("student_name");
	        	list.add(name);
	        }
	     
	     } catch (SQLException e) {
	         System.out.println("MySQL操作错误");
	         e.printStackTrace();
	     } catch (Exception e) {
	         e.printStackTrace();
	     } finally {
	         conn.close();
	     }
	     	return list;		
	 }
}

至此一个完成的echarts-柱状图已经实现完成

4.效果图：

官方API:http://echarts.baidu.com/

echarts样例：http://echarts.baidu.com/echarts2/doc/example.html

echarts简单快速上手

猜你喜欢