Java 根據貸款年限對應利率計算功能實現解析

阿新 • • 發佈：2020-11-18

技術標籤：java

E-charts

1.柱狀圖和餅狀圖

1.1怎樣展示？

1.1.1）.Jfreechart：免費，功能一般，效果一般（不怎麼絢麗），但是是之前的產物，以前用的比較多，現在用的比較少了，建議瞭解

1.1. 2）.e-charts:免費，百度出產的，功能強大，效果（絢麗），近幾年的產物，現在國內的眾多軟體公司用的比較多，推薦學習

1.1.3）.Hight-charts：國外產生，功能強大，效果絢麗，據說XX是抄襲他的，在國內用的比較少，建議瞭解

1.2使用圖表工具的意義

1.2.1）.清晰直觀的使得資料視覺化

1.1.2）.結和後臺技術真正做到資料的實時變化，例如可以實現k線圖，因為有js定時器

1.1.3）.提升軟體產品的使用者體驗

2.e-charts應用舉例之通過柱狀圖顯示公司的全年–季度財務統計報告

 1.引入e-charts和jquery
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>

2.在<body>標籤中設定圖顯示的在div中
<div id="main" style="width: 600px;height:400px;"></div>：備註如果要是想顯示自動適配為就設定為100%


3.後臺傳遞給zhutu.jsp三個list，其目的是為了顯示收入，支出和預算
/**
	 * 1.柱狀圖
	 * @param request
	 * @param response
	 * @throws IOException 
	 * @throws SQLException 
	 * @throws ClassNotFoundException 
	 * @throws ServletException 
	 */
private void zhu(HttpServletRequest request, HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException, ServletException {
	  System.out.println("TuServlet----->zhu()---->");	
	  List<Map<String, Object>> list_shouru=service.queryShouru();
	  List<Map<String, Object>> list_zhichu=service.queryZhichu();
	  List<Map<String, Object>> list_yusuan=service.queryYusuan();
	 
	  request.setAttribute("list_shouru", list_shouru);
	  request.setAttribute("list_zhichu", list_zhichu);
	  request.setAttribute("list_yusuan", list_yusuan);
	  
      request.getRequestDispatcher("/jsps/manages/tu/zhuTu.jsp").forward(request, response);
}

	public List<Map<String, Object>> queryShouru() throws ClassNotFoundException, SQLException {
		String sql=" SELECT  QUARTER(riqi) jidu,SUM(shouRuJinEr) jiner  FROM   shouru  GROUP BY  QUARTER(riqi)  ";
		List<Map<String, Object>> list_shouru = dao.executeQueryForList(sql);
		return list_shouru;
	}

	public List<Map<String, Object>> queryZhichu() throws ClassNotFoundException, SQLException {
		String sql2=" SELECT  QUARTER(riqi) jidu,SUM(zhiChuJinEr) jiner  FROM   zhichu  GROUP BY  QUARTER(riqi)  ";
		List<Map<String, Object>> list_zhichu = dao.executeQueryForList(sql2);
		return list_zhichu;
	}

	public List<Map<String, Object>> queryYusuan() throws ClassNotFoundException, SQLException {
		String sql3=" SELECT  QUARTER(riqi) jidu,SUM(yuSuanJinEr) jiner  FROM   yusuan  GROUP BY  QUARTER(riqi) ";
		List<Map<String, Object>> list_yusuan = dao.executeQueryForList(sql3);
		return list_yusuan;
	}


4.在zhutu.jsp中通過js將3個list中的資料顯示在div上

  <script type="text/javascript">
     alert("頁面已經載入了就開始觸發了.....");
	 var shouruData=[];//陣列物件：存放12個月的收入金額
	 var zhichuData=[];//陣列物件：存放12個月的支出金額
	 var yusuanData=[];//陣列物件：存放12個月的預算金額
	 <c:forEach items="${list_shouru}" var="shouru">
	 shouruData.push(parseInt("${shouru.jiner}"));
     </c:forEach>
	
		for(var i =0;i<shouruData.length;i++)
		{
			//alert("第"+(i+1)+"個月的收入金額為:"+shouruData[i]);
		}
				
		<c:forEach items="${list_zhichu}" var="zhichu">
		zhichuData.push(parseInt("${zhichu.jiner}"));
	     </c:forEach>
		
			for(var i =0;i<zhichuData.length;i++)
			{
				//alert("第"+(i+1)+"個月的支出金額為:"+zhichuData[i]);
			}
		
			 <c:forEach items="${list_yusuan}" var="yusuan">
			 yusuanData.push(parseInt("${yusuan.jiner}"));
		     </c:forEach>
		     
		     for(var i =0;i<yusuanData.length;i++)
				{
					//alert("第"+(i+1)+"個月的預算金額為:"+yusuanData[i]);
				}
    </script>

3.e-charts應用舉例之通過折線圖顯示學生的單月作業完成情況

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/echarts/echarts.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
	<script type="text/javascript">
	
	 var wanchengData=[];//陣列物件：存放一週的完成作業的每天的人數
	 var meiyouData=[];//陣列物件：存放一週的沒有完成作業的每天的人數
	 <c:forEach items="${list_zhexian}" var="zhexian">
	 wanchengData.push(parseInt("${zhexian.wanchen}"));
	 meiyouData.push(parseInt("${zhexian.meiyou}"));
     </c:forEach>
	var myChart = echarts.init(document.getElementById('main'));
		option = {
			    title : {
			        text: 'Java02班一週作業驗收情況統計走勢圖',
			        subtext: '二級標題'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['已完成','未完成']
			    },
			    toolbox: {
			        show : true,
			        x:'520',
			        y:'top',
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: true,title:"資料檢視",lang: ['資料檢視', '關閉', '重新整理'],},
			            magicType : {show: true, type: ['bar','line','stack'],title: {
			                line: '切換為折線圖',
			                bar: '切換為柱狀圖',
			                stack: '切換為堆疊',
			                tiled: '切換為平鋪'
			            }},
			            restore : {show: true,title:"還原",},
			            saveAsImage : {show: true,title:"儲存為圖片",}      
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
			            data : ['週一','週二','週三','週四','週五','週六','週日']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            axisLabel : {
			             formatter: '{value}人 '
			            }
			        }
			    ],
			    series : [
			        {
			            name:'已完成',
			            type:'line',
			            data:wanchengData,
			            markPoint : {
			                data : [
			                    {type : 'max', name: '最大值'},
			                    {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name: '平均值'}
			                ]
			            }
			        },
			        {
			            name:'未完成',
			            type:'line',
			            data:meiyouData,
			            markPoint : {
			                data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                ]
			            },
			            markLine : {
			                data : [
			                    {type : 'average', name : '平均值'}
			                ]
			            }
			        }
			    ]
			};
			                    
		 myChart.setOption(option);
	</script>
</body>
</html>

4.e-charts應用舉例之通過分佈圖顯示學院學生來源分佈

1.導讀補充：

MySQL的內建函式：
                         1) locate（search,str）：返回search在str的位置：例如
                            select locate('#',stu_native)  from xuesheng
                         2）LEFT（str，pos）：從左邊開始擷取子串：例如
                            select left(stu_native,locate('#',stu_native)-1)  from xuesheng
                         
最終結果：   SELECT LEFT(stu_native, LOCATE('#',stu_native)-1) ,COUNT(*)renshu FROM xuesheng   GROUP BY  LEFT(stu_native, LOCATE('#',stu_native)-1)


2.在TuServlet.java中
/**
 * @desc  4.分佈圖
 * @param request
 * @param response
 * @throws SQLException 
 * @throws ClassNotFoundException 
 * @throws IOException 
 * @throws ServletException 
 */
private void fenbu(HttpServletRequest request, HttpServletResponse response) throws ClassNotFoundException, SQLException, ServletException, IOException {
	  System.out.println("TuServlet----->fenbu()---->");	
	  List<Map<String, Object>> list_fenbu=service.queryFenbu();
	  request.setAttribute("list_fenbu", list_fenbu);
      request.getRequestDispatcher("/qxt/fb.jsp").forward(request, response);
	}


3.在Tuservice中

	public List<Map<String, Object>> queryFenbu() throws ClassNotFoundException, SQLException {
		
return dao.executeQueryForList(" SELECT LEFT(stu_native, LOCATE('#',stu_native)-1) shengfen,COUNT(*)renshu FROM xuesheng   GROUP BY  LEFT(stu_native, LOCATE('#',stu_native)-1)");
	}


4.fb.jsp中
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0;
        }
        #main {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script src="<%=request.getContextPath()%>/qxt/echarts.js"></script>
<script src="<%=request.getContextPath()%>/qxt/bmap.js"></script>
<script src="<%=request.getContextPath()%>/qxt/china.js"></script>
<script src="<%=request.getContextPath()%>/qxt/world.js"></script>
<script src="<%=request.getContextPath()%>/qxt/jquery-1.8.1.js"></script>
<script src="<%=request.getContextPath()%>/qxt/province_position.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sVMiVrWelyy5jTPT82UQxpx21avuUhLx"></script>
<script type="text/javascript">

var shengfenData=[];
var renshuData=[];

<c:forEach var="map" items="${list_fenbu}" >
shengfenData.push("${map.shengfen}");
renshuData.push("${map.renshu}");
</c:forEach>
var sum=0;
for(var i =0;i<renshuData.length;i++)
{
	sum=sum+parseInt(renshuData[i]);
}

var myChart = echarts.init(document.getElementById('main'));//獲取繪圖位置物件
function randomData() {
    return Math.round(Math.random()*1000);
}
//配置
option = {
    title: {
        x:'470px',
        text: '河北軟體學院學生來源地理分佈圖',
        textStyle:{
            fontSize:14
            ,fontWeight:'normal'
            ,color:'#565656'
        },
        left:480,
        top:10,
        textStyle: {
        	// 顏色
        	color: '#0066FF',
        	// 水平對齊方式，可選為：'left' | 'right' | 'center'
        	align: 'left',
        	// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
        	baseline: 'bottom',
        	// 字體系列
        	fontFamily: 'Arial, 黑體, sans-serif',
        	// 字號 ，單位px
        	fontSize: 20,
        	// 樣式，可選為：'normal' | 'italic' | 'oblique'
        	fontStyle: 'italic',
        	// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
        	fontWeight: 'bold'
        },
        
    },
    tooltip: {
         trigger: 'item'
        ,formatter:'{b}<br>瀏覽量：{c}'
    },

    visualMap: {
        min: 0,
        max: sum*2,
        left:20,
        bottom:10,
        text: ['高','低'],// 文字，預設為數值文字
        color:['red','orange','yellow','green'],
        calculable: true
    },
    series: [
        {
            type: 'map',// 圖表型別
            mapType: 'china',//顯示的型別為中國地圖，備註e-charts是支援中國地圖和世界地圖的
            roam: false,//是否開啟滑動滑鼠滾輪實現縮放
            itemStyle:{
            	// 預設狀態下地圖的文字
                normal:{label:{show:true}},
              },
            data:[
                  
                {name: '北京',value: 0 },
                {name: '天津',value: 0 },
                {name: '上海',value: 0 },
                {name: '重慶',value: 0 },
                {name: '河北',value: renshuData[3] },
                {name: '安徽',value: renshuData[0] },
                {name: '新疆',value: 0 },
                {name: '浙江',value: 0 },
                {name: '江西',value: 0 },
                {name: '山西',value: renshuData[2] },
                {name: '甘肅',value: 0 },
                {name: '青海',value: 0 },
                {name: '黑龍江',value: renshuData[7] },
                {name: '遼寧',value: 0 },
                {name: '山東',value: renshuData[1]},
                {name: '江蘇',value: 0 },
                {name: '河南',value: renshuData[4] },
                {name: '陝西',value: renshuData[6] },
                {name: '湖北',value: 0 },
                {name: '湖南',value: 0 },
                {name: '貴州',value: renshuData[5] },
                {name: '雲南',value: 0 },
                {name: '廣西',value: 0 },
                {name: '臺灣',value: 0 },
                {name: '海南',value: 0 },
                {name: '內蒙古',value: 0 },
                {name: '南海諸島',value: 0 },
                {name: '吉林',value: 0 },
                {name: '福建',value: 0 },
                {name: '廣東',value: 0 },
                {name: '西藏',value: 0 },
                {name: '四川',value: 0 },
                {name: '寧夏',value: 0 },
                {name: '香港',value: 0 },
                {name: '澳門',value: 0 }
             
            ]
        }
    ]
};
//為echarts物件載入資料
myChart.setOption(option);
</script>
</body>
</html>

5.效果截圖

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-CZFCHUlE-1607912306560)(C:\Users\22520\AppData\Roaming\Typora\typora-user-images\image-20201214093407189.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-dMQGhVWI-1607912306564)(C:\Users\22520\Desktop\作業截圖\12月14日e-charts效果圖之分佈圖\1 (1)].png)[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-VgJrA5oE-1607912306566)(C:\Users\22520\Desktop\作業截圖\12月14日e-charts效果圖之分佈圖\1 (2)].png)[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-JFUexgIq-1607912306568)(C:\Users\22520\Desktop\作業截圖\12月14日e-charts效果圖之分佈圖\3.png)]

Java 根據貸款年限對應利率計算功能實現解析

E-charts

1.柱狀圖和餅狀圖

1.1怎樣展示？

1.1.1）.Jfreechart：免費，功能一般，效果一般（不怎麼絢麗），但是是之前的產物，以前用的比較多，現在用的比較少了，建議瞭解

1.1. 2）.e-charts:免費，百度出產的，功能強大，效果（絢麗），近幾年的產物，現在國內的眾多軟體公司用的比較多，推薦學習

1.1.3）.Hight-charts：國外產生，功能強大，效果絢麗，據說XX是抄襲他的，在國內用的比較少，建議瞭解

1.2使用圖表工具的意義

1.2.1）.清晰直觀的使得資料視覺化

1.1.2）.結和後臺技術真正做到資料的實時變化，例如可以實現k線圖，因為有js定時器

1.1.3）.提升軟體產品的使用者體驗

2.e-charts應用舉例之通過柱狀圖顯示公司的全年–季度財務統計報告

3.e-charts應用舉例之通過折線圖顯示學生的單月作業完成情況

4.e-charts應用舉例之通過分佈圖顯示學院學生來源分佈

5.效果截圖

6.E-charts學習使用總結

實現資料視覺化（圖表形式）具體原理就是資料的查詢儲存與展示，大體的可以分為以下三步-----取資料，存值，轉向。

1.通過List<Map<String, Object>> list_shouru=tuService.queryShouRu();存資料

2.通過request.setAttribute(“list_shouru”,list_shouru);存值

3.通過 request.getRequestDispatcher("/jsps/tu/zhuTu.jsp").forward(request, response);轉向

Java 根據貸款年限對應利率計算功能實現解析

java根據給定的當前時間計算幾天後的當前時間

java根據不同的引數呼叫不同的實現類操作

Django框架查詢Extra功能實現解析

SpringCloud Zuul閘道器功能實現解析

Springboot actuator生產就緒功能實現解析

Java列舉根據引數獲取對應值

Java根據身份證號計算年齡，15位身份證號碼轉18位原理與操作示例

java 根據圓心計算圓弧上點的經緯度_圓弧插值演算法

Java MySQL 使用SQL語句，根據資料庫生日欄位計算使用者年齡

java 根據經緯度計算圓周

Java 根據出生日期計算年齡

Java List分頁功能實現程式碼例項

Java CRM系統使用者登入功能實現程式碼例項

Java LinkedList集合功能例項解析

Java 8 Stream 的終極技巧——Collectors 功能與操作方法詳解

Java飛行記錄器JFR功能實現過程圖解

Java根據控制檯實現定位異常

用Java程式設計輸出萬年曆的功能實現

JAVA及PYTHON質數計算程式碼對比解析

Java 根據貸款年限對應利率計算功能實現解析

E-charts

1.柱狀圖和餅狀圖

1.1怎樣展示？

1.1.1）.Jfreechart：免費，功能一般，效果一般（不怎麼絢麗），但是是之前的產物，以前用的比較多，現在用的比較少了，建議瞭解

1.1. 2）.e-charts:免費，百度出產的，功能強大，效果（絢麗），近幾年的產物，現在國內的眾多軟體公司用的比較多，推薦學習

1.1.3）.Hight-charts：國外產生，功能強大，效果絢麗，據說XX是抄襲他的，在國內用的比較少，建議瞭解

1.2使用圖表工具的意義

1.2.1）.清晰直觀的使得資料視覺化

1.1.2）.結和後臺技術真正做到資料的實時變化，例如可以實現k線圖，因為有js定時器

1.1.3）.提升軟體產品的使用者體驗

2.e-charts應用舉例之通過柱狀圖顯示公司的全年–季度財務統計報告

3.e-charts應用舉例之通過折線圖顯示學生的單月作業完成情況

4.e-charts應用舉例之通過分佈圖顯示學院學生來源分佈

5.效果截圖

6.E-charts學習使用總結

實現資料視覺化（圖表形式）具體原理就是資料的查詢儲存與展示，大體的可以分為以下三步-----取資料，存值，轉向。

1.通過List<Map<String, Object>> list_shouru=tuService.queryShouRu();存資料

2.通過request.setAttribute(“list_shouru”,list_shouru);存值

3.通過 request.getRequestDispatcher("/jsps/tu/zhuTu.jsp").forward(request, response);轉向

相關推薦