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制作圆形进度条的代码及基础分析

您的项目需求