使用echarts做图表

最新推荐文章于 2024-05-28 11:11:34 发布

疯子侠

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量261

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/oydl_1234/article/details/88373692

版权

Echarts是做数据统计的，是一个纯js的图标库，兼容大部分的浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)。

代码实例：

我用的是hibernate写的数据，连表查，然后创建视图，

Dao层

	public List<Develops> custAndOrder(Develops develops){
		return (List<Develops>) this.getHibernateTemplate().execute(new HibernateCallback<List<Develops>>() {
			@Override
			public List<Develops> doInHibernate(Session session) throws HibernateException {			
				//用sql连表 创建视图，生成视图，实体类，hbm,查询
				String hql = " from Develops where 1=1";
				if(develops.getOdr_customer()!=null) {
					hql +=" and odr_customer like '%"+develops.getOdr_customer()+"%'";
				}
				if(develops.getOdr_date()!=null) {
					hql +=" and odr_date like '%"+develops.getOdr_date()+"%'";
				}
				System.out.println(hql);
				Query query = session.createQuery(hql);
				//转map
//				query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).uniqueResult();
				List list = query.list();
				return list;
			}
		});
	}

action层

public String custAndOrder() {
		int endYear = 2018;
		int beginYear = 1980;
		ArrayList list = new ArrayList<>();
		for (int i = endYear; i >=beginYear; i--) {
			list.add(i);
		}
		session.setAttribute("datelist", list);
		
		develops.setOdr_customer(Cust_name);
		develops.setOdr_date(date);
		List<Develops> custAndOrder = this.tableBiz.custAndOrder(develops);
		for (Develops develops : custAndOrder) {
			System.out.println(develops);
		}
		try {
			ObjectMapper om = new ObjectMapper();
			String string = om.writeValueAsString(custAndOrder);
			ResponseUtil.writer(response , string);
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "list";
	}

jsp

只需要引入

我这还引入了很多bootstrap的js,当然这不是重点，看script中的代码

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-table-master/dist/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.4.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-table-master/dist/extensions/export/bootstrap-table-export.js"></script>

<script src="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>
<link  rel="stylesheet" href="${pageContext.request.contextPath}/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css"/>

<script src="${pageContext.request.contextPath }/Highcharts-6.1.2/Highcharts-6.1.2/code/highcharts.js"></script>
<script src="${pageContext.request.contextPath }/Highcharts-6.1.2/Highcharts-6.1.2/code/modules/exporting.js"></script>
<script src="${pageContext.request.contextPath }/Highcharts-6.1.2/Highcharts-6.1.2/code/modules/export-data.js"></script>
<script src="${pageContext.request.contextPath }/js/echarts.js"></script>

<script src="${pageContext.request.contextPath}/tableExport.jquery.plugin-master/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/tableExport.jquery.plugin-master/libs/js-xlsx/xlsx.core.min.js"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script src="../script/common.js"></script>
<script src="${pageContext.request.contextPath}/tableJs/tableDevote.js"></script>

</head>																																													
<body onload="year()">
<div class="page_title">客户贡献分析</div>
	<!-- 根目录 -->
	<input type="hidden" id="contextPath" value="${pageContext.request.contextPath}">
	<input type="hidden" id="userId" value="2"/>
		<div class="button_bar">
		  	<button id="btn" type="button" class="btn btn-default" onclick="year()">
	 			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
	 		</button>
			<button id="btn_ok" type="button"  class="btn btn-default" onclick="">
			 	<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>帮助
			</button>	
		</div>
		<br>
	<table class="query_form_table">
		<tr>
			<th>客户名称:</th>
			<td><input  name="chcName" id="chcName" value=""/></td>
			<th>年份:</th>
			<td>
				<select id="date" name="date">
			  		<option value="" selected="selected">请选择</option>
			  		<c:forEach items="${datelist }" var = "year">
			  			<option value="${year }">${year }</option>
			  		</c:forEach>
		  		</select>
			</td>
			
		</tr>
	</table>	 
	<!-- 数据表格 -->
	<table id="TableDevote" class="data_list_table"></table>
	
	<div id="main" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
        
         <script type="text/javascript">
         function year(){
         	var ctx = "${pageContext.request.contextPath}";
         	var da = [];
         	var nums = [];
         	var date = document.getElementById("date").value;
	         $.ajax({
	             url:ctx + '/sy/tableAction_custAndOrder.action?date='+date,//要请求的服务器url
	             async:true,   //是否为异步请求
	             cache:false,  //是否缓存结果
	             type:"POST", //请求方式为POST
	             dataType:"json",   //服务器返回的数据是什么类型
	             success:function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型)
	            	 var rows = result;
	             	 console.log(result)
	             	for(var i = rows.length-1;i>=0;i--){
	             		 da.push(rows[i].odr_customer);
	             	 }
	             	for(var i = rows.length-1;i>=0;i--){
	             		 nums.push(rows[i].sum);
	             	 } 
	                 if(result){ 
			            myChart.setOption({        //给echarts图标赋值
				            xAxis: {
				               data: da
				            },
				            series: [{
				                 data: nums
				             }]
			           });
	                 }else{
	                     alert("网页错误，请重写刷新网站")
	                 }
	             }
	         })
			 // 基于准备好的dom，初始化echarts实例
			 var myChart = echarts.init(document.getElementById('main'));
			 // 指定图表的配置项和数据
			 var option = {                 
			     title: {
			         text: '客户贡献分析'
			     },
			     tooltip: {},
			     legend: {
			         data:['客户数量']
			     },
			     xAxis: {
			         data: da,
			         axisLabel : {//标签内容太长的解决方案  坐标轴刻度标签的相关设置。
			                interval:0,
			                rotate:"45"
			            }
			     },
			     yAxis: {},
			     series: [{
			         name: '客户数量',
			         type: 'line',
			         data: nums,
			         itemStyle : {//设置折线的颜色，点的颜色
                         normal : {
                             color:'#1A94E6'
                         },
                         lineStyle:{
    	                     color:'#1A94E6'
    	             }
                     }
			         
			     }]
			 };
			
			 // 使用刚指定的配置项和数据显示图表。
			 myChart.setOption(option);
         }
        </script>
</body>
</html>

运行的效果是

疯子侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用echarts做图表

Echarts是做数据统计的，是一个纯js的图标库，兼容大部分的浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)。代码实例：我用的是hibernate写的数据，连表查，然后创建视图，Dao层 public List&lt;Develops&gt; custAndOrder(Develops develops){ return (List&lt;D...
复制链接

扫一扫