草庐IT

echarts入门教程(超级详细带案例)

争儿不脱发 2023-04-13 原文

一.echarts的介绍

1.echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。
2.学习一项技术的关键,还是需要多读官方文档,官网链接Apache ECharts,与之类似的图表库还有D3,HeightCharts
3.echarts的下载
(1)从 npm 获取
npm install echarts --save
(2)从 CDN 获取
(3)从 GitHub 获取

二.echarts语法

一.echarts常见术语

英文汉语
title标题
legend图例
tooltip提示
xAxisx轴线
yAxisy轴线
series系列
data数据

二.图表常见类型

  1. bar 柱状图
  2. line折线图
    (1)曲线图
    加上smooth:true;就会变成曲线图
    (2)面积图
    加上
    areaStyle:{fill:“#f70”}
    会变成面积图
  3. pie 饼形图
    (1)加上radius:[80,50] 会变成环形图

三.echarts 中的样式简介

  1. 颜色主题
    (1)主题可以通过切换深色模式,直接看到采用主题的效果
  • 通过light 、dark切换
  • 定制主题,具体可以参考官网,需要导入下载的js文件
// HTML 引入 vintage.js 文件后(假设主题名称是 "vintage")
var chart = echarts.init(dom, 'vintage');
// ...

(2)color调色盘
在 option 中设置。可以设置全局的调色盘,也可以设置系列自己专属的调色盘。
全局调色盘option.color

option.color:color: ["pink", "#ff0", "#f0f", "#0ff"]

局部调色盘series.item.color

series: [
    {
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
     
    },

(3)itemStyle项的颜色

  • itemStyle:{color:“#00f” }
  • 高亮的样式emphasis
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}
  1. 特殊样式
    渐变色
    (1)定义渐变
// 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
	}

(2)使用渐变

itemStyle:{
	color:linear,
	borderRadius:[30,30,0,0]
		}
  1. label标签
  • show:true是否显示
  • position:”insideRight“位置
  • formatter格式
    formatter: “{a}\n{c}分”
    {a}系列名
    {b}数据名
    {c}数值
    {d}百分百
  • rich富文本
series:[				
{type:"pie",radius:[200,110],data:[
{name:"百度",value:1200,
label:{show:true,
position:"center",
// {d}百分比 {big|内容} 使用样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义样式(富文本)
rich:{
	big:{
		color:"#f70",
		fontSize:"48px",
		fontWeight:900,
		},
	small:{											color:"#f70"
		}
		}
		}},
{name:"其他",value:360,
// 样式灰色
itemStyle:{color:"#ccc"},
// 标签不显示
label:{show:false},
// 提示不显示
tooltip:{show:false}}
					]}
				]
				 
			}

四.动态显示局部

  1. 定义option
  2. 修改option值
  3. echart.setOption(option);更新数据和视图

五.缓动动画

动画延迟animationDelay
动画时长animationDuration,
动画缓动函数animationEasing
animationDelay: function(idx) {
					// 越往后的数据延迟越大
					return idx * 200;
				},
				animationDuration: function(idx) {
					// 每小格动画的时候
					return idx * 200;
				},
				// 弹性的方式出现动画
				animationEasing: "bounceInOut"
			}

六.事件

  1. 事件的监听
    echart.on(”事件名“,处理函数)
  2. 发送事件
    dispatchAction
echart.dispatchAction({
	type: 'showTip',
// 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
	seriesIndex: 0,
// 数据项的 index,如果不指定也可以通过 name 属性根据名称指定数据项
	dataIndex: ind,
// 可选,数据项名称,在有 dataIndex 的时候忽略				 
	position:"top",
				})

三.echarts应用

实践出真知,学过前面的语法,快来创建属于自己的图表吧。练习完案例,就掌握了80%的echarts。宝子们快动手练习吧。

  1. 案例1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
					}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表,set设置 Option选项  data数据 type类型 bar条(柱状条),series系列(数据) Axis轴线 xAxis水平轴线 
		// legend传奇(图例) tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = {
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
				},
				{
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				},
				{
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					areaStyle:"#f70"
				},
				{
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						{name:"js",value:90},
						{name:"html",value:85},
						{name:"jq",value:90},
						{name:"vue",value:50},
					]
				}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表,set设置 Option选项  data数据 type类型 bar条(柱状条),series系列(数据) Axis轴线 xAxis水平轴线 
		// legend传奇(图例) tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例3
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 主题,light,dark,自定义
		// var echart = echarts.init(document.getElementById("container"),'purple-passion')
		// 4.2 定义配置项
		var option = {
			// 调色盘
			// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8],
					color:["#ac4cff"]
				},
				{
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				},
				{
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					// areaStyle:"#f70"
					
				},
				{
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						{name:"js",value:90},
						{name:"html",value:85,itemStyle:{
							color:"#ffaa00"
						}},
						{name:"jq",value:90,
						 itemStyle:{
							 normal:{color:"#93da6c"},
							 emphasis:{color:"#bcff57"}
						 }
						},
						{name:"vue",value:50},
					]
				}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表,set设置 Option选项  data数据 type类型 bar条(柱状条),series系列(数据) Axis轴线 xAxis水平轴线 
		// legend传奇(图例) tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例4
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
	// 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
	}
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 主题,light,dark,自定义
		// var echart = echarts.init(document.getElementById("container"),'purple-passion')
		// 4.2 定义配置项
		var option = {
			// 调色盘
			// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
			// 图表的标题
			title:{
				text:"我的第一个图表"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
			// x轴线
			xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8],
					// color:["#ac4cff"]
					itemStyle:{
						color:linear,
						borderRadius:[30,30,0,0]
					}
				},
				{
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				},
				{
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					// areaStyle:"#f70"
					
				},
				{
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						{name:"js",value:90},
						{name:"html",value:85,itemStyle:{
							color:"#ffaa00"
						}},
						{name:"jq",value:90,
						 itemStyle:{
							 normal:{color:"#93da6c"},
							 emphasis:{color:"#bcff57"}
						 }
						},
						{name:"vue",value:50},
					]
				}
			]
		}
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表,set设置 Option选项  data数据 type类型 bar条(柱状条),series系列(数据) Axis轴线 xAxis水平轴线 
		// legend传奇(图例) tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例5
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style> 
		 #container{
			 width: 800px;
			 height: 600px;
		 }
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title:{text:"堆叠-小小-大大"},
				legend:{data:["小小","大大"]},
				// tooltip提示  trigger触发器 axis轴线触发,item 当前项触发
				tooltip:{trigger:"axis"},
				yAxis:{data:["vue","js","html"]},
				xAxis:{},
				series:[
					{name:"小小",type:"bar",data:[80,60,75],stack:true,
					// stack堆叠,label 标签,position位置,inside内部,right右侧,formmater格式
					// \n 代表换行,{a}系列名 "陈康" {b}数值名 "vue"  {c}数值  80
					label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},
					{name:"大大",type:"bar",data:[95,80,35],stack:true,
					label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}
				]
			}
			echart.setOption(option);
		</script>
	</body>
</html>
  1. 案例6
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style> 
		 #container{
			 width: 800px;
			 height: 600px;
		 }
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title:{text:"堆叠-小小-大大"},
				toolbox: {
					// 显示工具箱
				    show: true,
				    feature: {
						// 数据缩放
				      dataZoom: {
				        yAxisIndex: 'none'
				      },
					  // 数据视图只读
				      dataView: { readOnly: false },
					  // 魔法类型
				      magicType: { type: ['line', 'bar'] },
					  //  重置
				      restore: {},
					  // 保存图片
				      saveAsImage: {}
				    }
				  },
				legend:{data:["小小","大大"]},
				// tooltip提示  trigger触发器 axis轴线触发,item 当前项触发
				tooltip:{trigger:"axis"},
				yAxis:{data:["vue","js","html"]},
				xAxis:{},
				series:[
					{name:"小小",type:"bar",data:[80,60,75],stack:true,
					// stack堆叠,label 标签,position位置,inside内部,right右侧,formmater格式
					// \n 代表换行,{a}系列名 "陈康" {b}数值名 "vue"  {c}数值  80
					label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},
					{name:"大大",type:"bar",data:[95,80,35],stack:true,
					label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}
				]
			}
			echart.setOption(option);
		</script>
	</body>
</html>
  1. 案例7
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style> 
		 #container{
			 width: 800px;
			 height: 600px;
		 }
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title:{text:"网站访问来源"},
				legend:{data:["其他","百度"]},
				tooltip:{},
				series:[
					{type:"pie",radius:[200,110],data:[
						{name:"百度",value:1200,label:{
							show:true,
							position:"center",
							// {d}百分比 {big|内容} 使用样式
							formatter:"{big|{d}}{small|%}\n{b}",
							// 定义样式(富文本)
							rich:{
								big:{
									color:"#f70",
									fontSize:"48px",
									fontWeight:900,
								},
								small:{
									color:"#f70"
								}
							}
						}},
						{name:"其他",value:360,
						// 样式灰色
						itemStyle:{color:"#ccc"},
						// 标签不显示
						label:{show:false},
						// 提示不显示
						tooltip:{show:false}}
					]}
				]
				 
			}
			echart.setOption(option);
		</script>
	</body>
</html>
  1. 案例8
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style> 
		 #container{
			 width: 1200px;
			 height: 600px;
		 }
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript" src="./js/data.js">			
		</script>
		<script>
			console.log(data);
			// sort排序,map映射,slice(-4)切割后四位
			var  trends = data.data.trends.sort((a,b)=>a.day-b.day);
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title:{text:"新冠肺炎趋势"},
				legend:{data:["累计确诊"]},
				tooltip:{},
				yAxis:{},
				// slice(0,20),只显示前20条数据
				xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
				series:[{
					name:"累计确诊",
					type:"bar",
					// data:[{name:"",value:""}]
					data:trends.slice(0,20).map(item=>item.sure_cnt)
				}]				 
			}
			// 每隔3秒执行一次move
			var id = setInterval(move,3000);
			
			function move(){
				// 删除第一个
				var first = trends.shift();
				// 添加到最后
				trends.push(first);
				// 更新option
				option.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));
				option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);
				// 更新 图
				echart.setOption(option);
			}
			// 鼠标移入停止动画
			echart.on("mouseover",function(){clearInterval(id)})
			// 鼠标移出播放
			echart.on("mouseout",function(){
				id = setInterval(move,3000);
			})
			
			echart.setOption(option);
		</script>
	</body>
</html>
  1. 案例9
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#container {
				width: 1200px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript" src="./js/data.js">
		</script>
		<script>
			console.log(data);
			// sort排序,map映射,slice(-4)切割后四位
			var trends = data.data.trends.sort((a, b) => a.day - b.day);
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title: {
					text: "新冠肺炎趋势"
				},
				legend: {
					data: ["累计确诊"]
				},
				tooltip: {},
				yAxis: {},
				// slice(0,20),只显示前20条数据
				xAxis: {
					data: trends.slice(0, 20).map(item => String(item.day).slice(-4))
				},
				series: [{
					name: "累计确诊",
					type: "bar",
					// data:[{name:"",value:""}]
					data: trends.slice(0, 20).map(item => item.sure_cnt)
				}],
				// 每个执行延迟的时候(idx就是下标,随着下标的增大延迟会长)
				animationDelay: function(idx) {
					// 越往后的数据延迟越大
					return idx * 200;
				},
				animationDuration: function(idx) {
					// 每小格动画的时候
					return idx * 200;
				},
				// 弹性的方式出现动画
				animationEasing: "bounceInOut"
			}
			// 每隔3秒执行一次move
			// var id = setInterval(move,3000);

			function move() {
				// 删除第一个
				var first = trends.shift();
				// 添加到最后
				trends.push(first);
				// 更新option
				option.xAxis.data = trends.slice(0, 20).map(item => String(item.day).slice(-4));
				option.series[0].data = trends.slice(0, 20).map(item => item.sure_cnt);
				// 更新 图
				echart.setOption(option);
			}
			// 鼠标移入停止动画
			echart.on("mouseover", function() {
				clearInterval(id)
			})
			// 鼠标移出播放
			echart.on("mouseout", function() {
				id = setInterval(move, 3000);
			})

			echart.setOption(option);
		</script>
	</body>
</html>

  1. 案例10
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style> 
		 #container{
			 width: 1200px;
			 height: 600px;
		 }
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript" src="./js/data.js">			
		</script>
		<script>
			console.log(data);
			// sort排序,map映射,slice(-4)切割后四位
			var  trends = data.data.trends.sort((a,b)=>a.day-b.day);
			var echart = echarts.init(document.getElementById("container"))
			var option = {
				title:{text:"新冠肺炎趋势"},
				legend:{data:["累计确诊"]},
				tooltip:{},
				yAxis:{},
				// slice(0,20),只显示前20条数据
				xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
				series:[{
					name:"累计确诊",
					type:"bar",
					// data:[{name:"",value:""}]
					data:trends.slice(0,20).map(item=>item.sure_cnt)
				}],
				// 每个执行延迟的时候(idx就是下标,随着下标的增大延迟会长)
				animationDelay: function (idx) {
				     // 越往后的数据延迟越大
				     return idx * 100;
				},
				animationDuration:function(idx){
					// 每小格动画的时候
					return idx*100;
				},
				// 弹性的方式出现动画
				animationEasing:"bounceInOut"
			}
			// 每隔3秒移动一个
			// 显示提示的下标
			var ind = 0;
			var id = setInterval(play,3000);
			// 播放
			function play(){
				// 发送一个显示提示的动作
				echart.dispatchAction({
					type: 'showTip',
					// 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
					seriesIndex: 0,
					// 数据项的 index,如果不指定也可以通过 name 属性根据名称指定数据项
					dataIndex: ind,
					// 可选,数据项名称,在有 dataIndex 的时候忽略
					 
					position:"top",
				})
				// 让ind加1
				ind++;
				// 大于20就归0
				if(ind>=20){
					ind=0;
				}
			}
			
			echart.setOption(option);
		</script>
	</body>
</html>

终于到底啦,你是最棒的哟👏👏👏

有关echarts入门教程(超级详细带案例)的更多相关文章

  1. 「Python|Selenium|场景案例」如何定位iframe中的元素? - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时,对于使用了iframe的页面,如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候,可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签,如果直接查找是无法找到的,会抛出没有找到元素的异常。比如近在咫尺的例子就是,CSDN的登录窗体就是使用的iframe,大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素,会抛出NoSuchElementException异常。解决

  2. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  3. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  4. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  7. hadoop安装之保姆级教程(二)之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的,针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜,提出了全新的资源管理框架YARN. ApacheYARN(YetanotherResourceNegotiator的缩写)是Hadoop集群的资源管理系统,负责为计算程序提供服务器计算资源,相当于⼀个分布式的操作系统平台,⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现,但是因为具有⾜够的通⽤性,同样可以⽀持其他的分布式计算模

  8. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  9. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手,并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是,我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

  10. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

随机推荐