Html、Css、JavaScript制作圓形進度條的代碼及基礎分析

.說明：

推薦指數：★★★★

通俗易懂，小白一看就會，高手請飄過。

學python也是需要懂一點Html、Css、JavaScript的基礎知識的。

建議使用vscode編輯器。

2.效果圖1

3.代碼：保存為html，用瀏覽器打開即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圓形百分比進度條效果</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			<!--100%是顯示百分數，動態顯示由0~100-->
			<div class="text">100%</div> 

		</div>
		
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){				
				//獲取百分比值
				var num = parseInt($('.text').html());
				
				//通過計時器來顯示過渡的百分比進度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除計時器結束該方法調用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改變頁面顯示百分比
				function calculate(value){
					//改變頁面顯示的值
					$('.text').html(value + '%');
					
					//清除上次調用該方法殘留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//當百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})
		</script>
		
	</body>
</html>

4.拆分法：把一個含有css和js（JavaScript）的html，拆掉三個文件，一個叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個文件夾內。這是./的意思，也可以指定文件夾。

4.1 cirbar1.html的代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圓形百分比進度條效果v2</title>
		<!--如果是style type="text/css"這種直接在html中設置css，注意起始是*，不是點-->
		<!--style type="text/css"-->
		<link href="./cirbar1.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			
			<div class="text">100%</div> 
		</div>
		<!--這個外部js文件=jquery.min.js，不能少，否則不能動了-->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
        <!--同樣的，把寫在html的js，新建一個cirbar1.js，復制下去，保存，這樣子簡潔很多-->
		<!--script type="text/javascript"-->
		<script src="./cirbar1.js"></script>
	</body>
</html>

4.2 cirbar1.css的代碼：

		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}

4.3 cirbar1.js的代碼：

			$(function(){				
				//獲取百分比值
				var num = parseInt($('.text').html());
				
				//通過計時器來顯示過渡的百分比進度
				var temp = 0;
				var timer = setInterval(function(){
					calculate(temp);
					//清除計時器結束該方法調用
					if(temp == num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改變頁面顯示百分比
				function calculate(value){
					//改變頁面顯示的值
					$('.text').html(value + '%');
					
					//清除上次調用該方法殘留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//當百分比小于等于50
					if(value <= 50){
						var html = '';
						
						html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -= 50;
						var html = '';
						
						html += '<div class="circle-left">';
						html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html += '</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})

==============================

再來一個，不用外部js文件的圓形進度條

順帶回顧一下相關知識。

==============================

5.效果圖

6.三個文件，放在同一個文件夾中

6.1 cirbar.html代碼：

<!--第1步---聲明html5-->
<!DOCTYPE html> 

<!--第2步---html大框架-->
<html lang="en">

<!--第2-1步---head部分-->
<head>
    <!--第2-1-1步---meta部分：聲明字符編碼格式：utf-8-->
    <!--注意與python的第一行聲明一樣：# -*- coding: utf-8 -*-->
    <meta charset="utf-8" />
    <!--第2-1-2步---標題名稱-->
    <title>圓形進度條v1</title>
    <!--注意：./代表同一個文件夾下，也就是css和js文件與本html文件放在同一個文件夾下-->
    <!--第2-1-3步---導入css文件-->
    <link href="./cirbar.css" rel="stylesheet" />
</head>

<!--第2-2步---body部分-->
<body>
    <!--第2-2-1步---定義畫布部分，注意沒有逗號隔開，大小設置-->
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <!--第2-2-2步---導入js文件部分-->
    <script src="./cirbar.js"></script>

<!--注意收尾-->
</body>
<!--注意收尾-->
</html>

6.2 cirbar.css代碼：

.canvas {
            /*畫布的背景顏色設置為：黑色*/
            background:#303030;
            
        }

6.3 cirbar.js代碼：

window.onload = function () {
            var canvas = document.getElementById('canvas'),  //獲取canvas元素
                context = canvas.getContext('2d'),  //獲取畫圖環境，指明為2d
                centerX = canvas.width / 2,   //Canvas中心點x軸坐標
                centerY = canvas.height / 2,  //Canvas中心點y軸坐標
                rad = Math.PI * 2 / 100, //將360度分成100份，那么每一份就是rad度
                speed = 0.1; //加載的快慢就靠它了
            //繪制紅色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle = "	#1E90FF"; //隨百分數轉動的外圈的顏色為藍色
                context.lineWidth = 3; //設置線寬
                context.beginPath(); //路徑開始
                //注意-為順時針，+為逆時針
                //用于繪制圓弧context.arc(x坐標，y坐標，半徑，起始角度，終止角度，順時針/逆時針)
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false); 
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false); 
                context.stroke(); //繪制
                context.closePath(); //路徑結束
                context.restore();
            }
            //繪制白色外圈，初始的白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                // 下面百分數的字體顏色設置后上面的外圈的顏色竟然保持一樣
                //context.strokeStyle = "#F8F8FF";
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字繪制
            function text(n) {
                context.save(); //save和restore可以保證樣式屬性只運用于該段canvas元素
                context.strokeStyle = "#7FFF00";//設置中間動態百分數的顏色
                context.font = "25px Arial"; //設置字體大小和字體
                context.textAlign = 'center';//字體水平居中
                context.textBaseline = 'middle';//字體垂直居中
                //繪制字體，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //執行繪制
                context.restore();
            }
            //循環獲取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //1可從后臺獲取值,也是從0~100，step為1，代表速度
                    speed += 1;
                }
            }());
        }

注意到6.3js文件與4.3js文件的區別了么？一個有：window.onload =，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。

《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言，希望大家以后關注本頭條號更多的內容。《大數據和人工智能》頭條號方便有基礎讀者的同時照顧廣大沒入門的初學者。

隨著互聯網技術的發展，尤其是移動互聯技術的發展，網絡空間的數據量呈現出爆炸式增長。如何從這些數據中快速獲取自己想要的信息，并以一種直觀、形象的方式展現出來？這就是大數據可視化要解決的核心問題。

數據可視化，最早可追溯到20世紀50年代，它是一門關于數據視覺表現形式的科學技術研究。數據可視化是一個處于不斷演變之中的概念，其邊界在不斷地擴大，主要指的是技術上較為高級的技術方法，而這些技術方法允許利用圖形圖像處理、計算機視覺及用戶界面，通過表達、建模，以及對立體、表面、屬性及動畫的顯示，對數據加以可視化解釋。

1、大數據可視化的特點

（1）可視化可以使得碎片化的數據轉換為具有特定結構的知識，從而為決策支持提供幫助。

（2）數據可視化的片面性特征要求可視化模式不能替代數據本身，只能作為數據表達的一種特定形式。

（3）大數據所產生的數據量必然要求人們對數據進行歸納總結，對數據的結構和形式進行轉換處理。

（4）專業化特征是人們從可視化模型中提取專業知識的環節，它是數據可視化應用的最后流程。

數據可視化的作用主要包括數據表達、數據操作和數據分析3個方面，它是以可視化技術支持計算機輔助數據認識的3個基本階段。

（1）數據表達

數據表達是通過計算機圖形圖像技術來更加友好地展示數據信息，方便人們閱讀、理解和運用數據。常見的形式如文本、圖表、圖像、二維圖形、三維模型、網絡圖、樹結構、符號和電子地圖等。

（2）數據操作

數據操作是以計算機提供的界面、接口、協議等條件為基礎完成人與數據的交互需求，數據操作需要友好的人機交互技術、標準化的接口和協議支持來完成對多數據集合或者分布式的操作。

（3）數據分析

數據可視化可以有效地表達數據的各類特征，幫助人們推理和分析數據背后的客觀規律，進而獲得相關知識，提高人們認識數據的能力和利用數據的水平。

2、數據可視化流程

（1）數據獲取

主動式是以明確的數據需求為目的，如衛星影像、測繪工程等；被動式是以數據平臺為基礎，由數據平臺的活動者提供數據來源，如電子商務、網絡論壇等。

（2）數據處理

數據處理是指對原始的數據進行質量分析、預處理和計算等步驟。數據處理的目標是保證數據的準確性、可用性。

（3）可視化模式

可視化模式是數據的一種特殊展現形式，常見的可視化模式有標簽云、序列分析、網絡結構、電子地圖等。可視化模式的選取決定了可視化方案的雛形。

（4）可視化應用

可視化應用主要根據用戶的主觀需求展開，最主要的應用方式是用來觀察和展示，通過觀察和人腦分析進行推理和認知，輔助人們發現新知識或者得到新結論。

3、大數據可視化的工具

（1）Excel

Excel是Microsoft Office的組件之一，是由Microsoft為Windows和Apple Macintosh操作系統的計算機編寫和運行的一款表格計算軟件。Excel 是微軟辦公套裝軟件的一個重要組成部分，它可以進行各種數據的處理、統計分析、數據可視化顯示及輔助決策操作，廣泛地應用于管理、統計、財經、金融等眾多領域。

（2）Processing

Processing在數據可視化領域有著廣泛的應用，可制作信息圖形、信息可視化、科學可視化和統計圖形等。下面通過一個簡單實例來認識一下如何利用Processing實現數據的可視化展示。

（3）NodeXL

NodeXL 不僅具備常見的分析功能，如計算中心性、Page Rank值、網絡連通度、聚類系數等，還能對暫時性網絡進行處理。在布局方面，NodeXL主要采用力導引布局方式。

NodeXL 的一大特色是可視化交互能力強，具有圖像移動、變焦和動態查詢等交互功能。其另一特色是可直接與互聯網相連，用戶可通過插件或直接導入E-mail或微博網頁中的數據。

（4）ECharts

ECharts自2013年6月正式發布1.0版本以來，在短短兩年多的時間，功能不斷完善，截至目前，ECharts已經可以支持包括折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖12類圖表，同時提供標題、詳情氣泡、圖例、值域、數據區域、時間軸、工具箱7個可交互組件，支持多圖表、組件的聯動和混搭展現。

ECharts圖表工具為用戶提供了詳細的幫助文檔，這些文檔不僅介紹了每類圖表的使用方法，還詳細介紹了各類組件的使用方法，每類圖表都提供了豐富的實例。用戶在使用時可以參考實例提供的代碼，稍加修改就可以滿足自己的圖表展示需求。

4、大數據可視化展現的形式

大數據可視化展現的圖形有柱狀圖、散點圖、K線圖等等，下面列舉一些常用的展現形式：

（1）柱狀圖

柱狀圖(bar chart)，是一種以長方形的長度為變量的表達圖形的統計報告圖，由一系列高度不等的縱向條紋表示數據分布的情況，用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。柱狀圖亦可橫向排列，或用多維方式表達。

（2）餅狀圖

餅狀圖常用于統計學模型，有2D與3D餅狀圖，2D餅狀圖為圓形。

餅狀圖顯示一個數據系列：在圖表中繪制的相關數據點，這些數據源自數據表的行或列。圖表中的每個數據系列具有唯一的顏色或圖案并且在圖表的圖例中表示。可以在圖表中繪制一個或多個數據系列。餅狀圖只有一個數據系列。圖中各項的大小與各項總和的比例。

餅狀圖中的數據點：在圖表中繪制的單個值，這些值由條形、柱形、折線、餅狀圖或圓環圖的扇面、圓點和其他被稱為數據標記的圖形表示。相同顏色的數據標記組成一個數據系列。

（3）散點圖

散點圖是指在回歸分析中，數據點在直角坐標系平面上的分布圖，散點圖表示因變量隨自變量而變化的大致趨勢，據此可以選擇合適的函數對數據點進行擬合。

用兩組數據構成多個坐標點，考察坐標點的分布，判斷兩變量之間是否存在某種關聯或總結坐標點的分布模式。散點圖將序列顯示為一組點。值由點在圖表中的位置表示。類別由圖表中的不同標記表示。散點圖通常用于比較跨類別的聚合數據。

（4）曲線圖

曲線圖也稱線狀圖，是指用于技術分析，線狀圖是最簡單的圖形。這種圖形清楚地記錄價格隨時間變動而變化，以點標示價格的變化，并連點成線。

線狀圖的繪制須先建立坐標系，橫坐標為繪圖者所選擇的時間單位，縱坐標是繪圖者選擇的價格變動幅度單位，把特定時間單位內的價格水平以點的形式標在座標上，并連點成線，即可繪制成價格變動的線狀圖。該圖可清楚地反映出過去時間內匯價的變動情況。

（5）百度地圖

百度地圖是為用戶提供包括智能路線規劃、智能導航（駕車、步行、騎行）、實時路況等出行相關服務的平臺。

作為地圖行業市場的領先者，百度地圖秉持"科技讓出行更簡單"的品牌愿景，以"服務用戶出行"為使命，以"科技"為手段不斷探索創新。百度地圖國際化地圖已覆蓋全球209個國家和地區。伴隨著AI時代的到來，百度地圖實現了語音交互覆蓋用戶操控全流程，還上線了AR步導、AR導游等實用功能，更加方便用戶的出行。

5、使用Echarts實現數據可視化

Echarts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

Echarts的特點如下：

（1）豐富的可視化類型

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。

除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數，就可以從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。

（2）多種數據格式無需轉換直接使用

ECharts 內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數據源，通過簡單的設置 encode 屬性就可以完成從數據到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數據轉換的步驟，而且多個組件能夠共享一份數據而不用克隆。

為了配合大數據量的展現，ECharts 還支持輸入 TypedArray 格式的數據，TypedArray 在大數據量的存儲中可以占用更少的內存，對 GC 友好等特性也可以大幅度提升可視化應用的性能。

（3）千萬數據的前端展現

通過增量渲染技術，配合各種細致的優化，ECharts 能夠展現千萬級的數據量，并且在這個數據量級依然能夠進行流暢的縮放平移等交互。

幾千萬的地理坐標數據就算使用二進制存儲也要占上百 MB 的空間。因此 ECharts 同時提供了對流加載（4.0+）的支持，你可以使用 WebSocket 或者對數據分塊后加載，加載多少渲染多少，不需要漫長地等待所有數據加載完再進行繪制。　

（4）移動端優化

ECharts 針對移動端交互做了細致的優化，例如移動端小屏上適于用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放（用鼠標滾輪）、平移等。

細粒度的模塊化和打包機制可以讓 ECharts 在移動端也擁有很小的體積，可選的 SVG 渲染模塊讓移動端的內存占用不再捉襟見肘

（5）多渲染方案，跨平臺使用

ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內存擔憂，Canvas 可以輕松應對大數據量和特效的展現。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現。

除了 PC 和移動端的瀏覽器，ECharts 還能在 node 上配合 node-canvas 進行高效的服務端渲染（SSR）。從 4.0 開始我們還和微信小程序的團隊合作，提供了 ECharts 對小程序的適配。

（6）深度的交互式數據探索

交互是從數據中發掘信息的重要手段。"總覽為先，縮放過濾按需查看細節"是數據可視化交互的基本需求。

ECharts 一直在交互的路上前進，我們提供了圖例、視覺映射、數據區域縮放、tooltip、數據刷選等開箱即用的交互組件，可以對數據進行多維度數據篩取、視圖縮放、展示細節等交互操作。　

（7）多維數據的支持以及豐富的視覺編碼手段

ECharts 3 開始加強了對多維數據的支持。除了加入了平行坐標等常見的多維數據可視化工具外，對于傳統的散點圖等，傳入的數據也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠將不同維度的數據映射到顏色，大小，透明度，明暗度等不同的視覺通道。

（8）動態數據

ECharts 由數據驅動，數據的改變驅動圖表展現的改變。因此動態數據的實現也變得異常簡單，只需要獲取數據，填入數據，ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。配合 timeline 組件能夠在更高的時間維度上去表現數據的信息。

（9）絢麗的特效

ECharts 針對線數據，點數據等地理數據的可視化提供了吸引眼球的特效。

通過GL實現更多更強大絢麗的三維可視化。想要在 VR，大屏場景里實現三維的可視化效果？我們提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通組件一樣輕松的使用 ECharts GL 繪制出三維的地球，建筑群，人口分布的柱狀圖，在這基礎之上我們還提供了不同層級的畫面配置項，幾行配置就能得到藝術化的畫面。

示例-1：

在數據倉庫hive中有個月銷售額表Month_ Sales，數據格式如下：

產品系列單價銷售量銷售額

樣本數據如下：

B 255 102 26010

B2 333 76 25308

C 308 88 27104

D 399 76 30324

B1 200 87 22000

A1 300 52 23000

C1 109 73 24000

D1 101 89 24900

要求：

1、使用ajax調用后臺接口獲取Month_ Sales月銷售額度在25000以上的產品系列

2、將結果展現在圖表，如下所示：

實現過程如下所示：

<html>

<head>

</head>

<body>

$(function(){

var xAxisData = new Array();

var yAxisData = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/monthSales/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data){

//商品名稱數組

　　xAxisData.push(data[i].product);

//商品銷售額數組

yAxisData.push(data[i].sales);

}

error: function (data) {

alert('請求失敗');

}

});

// 基于準備好的dom，初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據

var option = {

title: {

text: '月銷售額度在25000以上的產品系列'

color: ['#3398DB'],//柱狀圖顏色

tooltip : {

trigger: 'axis',

axisPointer : { // 坐標軸指示器，坐標軸觸發有效

type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'

}

legend: {

data:['銷售額']

xAxis: {

data: xAxisData

yAxis: {},

series: [{

name: '銷售額',

type: 'bar',

barWidth: '50%',

data: yAxisData

}]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});

</script>

</body>

</html>

示例-2：

下面是各個國家某產品出口配額的數據（表名：export_quota）：

國家銷量（單位：億元）

中國 11.2

美國 13.5

日本 7.6

德國 8.9

法國 9.6

意大利 9.2

馬來西亞 7.4

要求使用hive實現輸入一個或者某幾個國家查詢產品的出口配額數據，將結果展現為條形圖。例如查詢上述樣本所有數據，圖形展現如下：

實現過程如下：

<html>

<head>

</head>

<body>

$(function(){

var xAxisData = new Array();

var yAxisData = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/exportQuota/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data){

//國家名稱數組

　　xAxisData.push(data[i].exportAmount);

//出口配額數組

yAxisData.push(data[i].country);

}

error: function (data) {

alert('請求失敗');

}

});

// 基于準備好的dom，初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據

var option = {

title: {

text: '產品出口額'

color: ['blue'],//柱狀圖顏色

tooltip : {

trigger: 'axis',

axisPointer : { // 坐標軸指示器，坐標軸觸發有效

type : 'shadow' // 默認為直線，可選為：'line' | 'shadow'

}

xAxis: {

type:'value',

data: [0,2]

yAxis: {

data: yAxisData

series: [{

name: '銷售額',

type: 'bar',

barWidth: '50%',

data: xAxisData

}]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});

</script>

</body>

</html>

示例-3：

經過調查，男女身高和體重有一定的分布關系（應該是正態分布），就是給你一定的身高，就能大致預測出他（她）的體重。當然非正常數據除外，比如某人身高只有160，但是體重確是190斤，我們把非正常數據清洗的過程叫做"去噪"。Female_Height_Weight.log和

Male_Height_Weight.log給出2003年的調研數據。

要求：

1、使用hive能夠查詢給定男女身高范圍的散點圖，例如，查詢男身高范圍：170—190，女身高范圍：160—180，然后顯示身高和體重關系的散點圖

2、使用Echarts散點圖展現處理后的結果 :

實現過程如下所示：

<html>

<head>

</head>

<body>

$(function(){

var allmales = new Array();

var allfemales = new Array();

// ajax同步從服務器請求數據

$.ajax({

type: 'get',

url: 'http://localhost:8888/bigdata/personHeightWeight/list',

data: {},

dataType: 'json',

async: false,

success: function (data) {

for(var i in data.males){

var males = new Array();

males.push(data.males[i].height);

males.push(data.males[i].weight);

allmales.push(males);

}

for(var i in data.females){

var females = new Array();

females.push(data.females[i].height);

females.push(data.females[i].weight);

allfemales.push(females);

}

error: function (data) {

alert('請求失敗');

}

});

// 基于準備好的dom，初始化echarts實例

var myChart = echarts.init(document.getElementById('main'));

var option = {

title : {

text: '男性女性身高體重分布',

subtext: '抽樣調查來自: Heinz 2003'

tooltip : {

trigger: 'axis',

showDelay : 0,

formatter : function (params) {

if (params.value.length > 1) {

return params.seriesName + ' :<br/>'

+ params.value[0] + 'cm '

+ params.value[1] + 'kg ';

}

else {

return params.seriesName + ' :<br/>'

+ params.name + ' : '

+ params.value + 'kg ';

}

axisPointer:{

show: true,

type : 'cross',

lineStyle: {

type : 'dashed',

width : 1

}

legend: {

data:['女性','男性']

toolbox: {

show : true,

feature : {

mark : {show: true},

dataZoom : {show: true},

dataView : {show: true, readOnly: false},

restore : {show: true},

saveAsImage : {show: true}

}

xAxis : [

{

type : 'value',

scale:true,

axisLabel : {

formatter: '{value} cm'

}

yAxis : [

{

type : 'value',

scale:true,

axisLabel : {

formatter: '{value} kg'

}

series : [

{

name:'女性',

type:'scatter',

data: allfemales,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

{

name:'男性',

type:'scatter',

data: allmales,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

]

};

// 使用剛指定的配置項和數據顯示圖表。

myChart.setOption(option);

});

</script>

</body>

</html>

《大數據和人工智能交流》的宗旨

1、將大數據和人工智能的專業數學：概率數理統計、線性代數、決策論、優化論、博弈論等數學模型變得通俗易懂。

2、將大數據和人工智能的專業涉及到的數據結構和算法：分類、聚類、回歸算法、概率等算法變得通俗易懂。

3、最新的高科技動態：數據采集方面的智能傳感器技術；醫療大數據智能決策分析；物聯網智慧城市等等。

4、根據初學者需要會有C語言、Java語言、Python語言、Scala函數式等目前主流計算機語言。

5、根據讀者的需要有和人工智能相關的計算機科學與技術、電子技術、芯片技術等基礎學科通俗易懂的文章。

SS圓形展開菜單。

·1.設置開關狀態為checked時子菜單的展開收縮動畫。

·2.設置開關狀態為checked時子菜單的展開收縮動畫。

·3.設置開關狀態為checked時子菜單的展開收縮動畫。

·4.重置開關細節樣式。

·5.添加子菜單的詳細樣式。

·6.設置開關狀態為checked時子菜單的展開收縮動畫。

·7.設置開關狀態為checked時子菜單的展開收縮動畫。

在線咨詢

上一篇：HTML培訓：如何在HTML中更改文本大小
下一篇：探索 HTML input 標簽的無限可能：打造動態表單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html、Css、JavaScript制作圓形進度條的代碼及基礎分析

您的項目需求