@kc++

数据可视化 -- ECharts 入门

文章目录

引言
1. ECharts的基本使用
- 1.1 ECharts的快速上手
- 1.2 相关配置讲解
2. ECharts常用图表
- 2.1 图表1 柱状图
- - 2.1.1 柱状图的实现步骤
  - 2.1.2 柱状图的常见效果
  - 2.1.3 柱状图特点
  - 2.1.4 通用配置
- 2.2 图表2 折线图
- - 2.2.1 折线图的实现步骤
  - 2.2.2 折线图的常见效果
  - 2.2.3 折线图的特点
- 2.3 图表3 散点图
- - 2.3.1 散点图的实现步骤
  - 2.3.2 散点图的常见效果
  - 2.3.3 散点图的特点
  - 2.3.4 直角坐标系的常见配置
- 2.4 .图表4 饼图
- - 2.4.1 饼图的实现步骤
  - 2.4.2 饼图的常见效果
  - 2.4.3 饼图的特点
- 2.5 图表5 地图
- - 2.5.1 地图图表的使用方式
  - 2.5.2 矢量地图的实现步骤
  - 2.5.3 地图的常见配置
  - 2.5.4 地图的常见效果
- 2.6 图表6 雷达图
- - 2.6.1 雷达图的常见效果
3. 配置项小结
- 3.1 柱状图 bar
- 3.2 折线图 line
- 3.3 散点图 scatter
- 3.4 饼图 pie
- 3.5 地图 map
- 3.6 雷达图 radar
- 3.7 直角坐标系配置
- 3.8 通用配置

引言

数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现. 那什么方式是更加直观的方式呢? 就是图表。

什么是ECharts？
ECharts（全称“EchoCharts”）是一个开源的、纯JavaScript实现的图表库，由百度前端团队（EFE）以及社区贡献者共同维护和开发。它提供了一整套丰富的图表类型，包括折线图、柱状图、饼图、雷达图、散点图、地图、热力图、箱线图等，用于各种数据可视化需求。

1. ECharts的基本使用

1.1 ECharts的快速上手

步骤1：引入 echarts.js 文件
echarts是一个 js 的库，所以得先引入这个库文件

<script src="js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

<div id="main" style="width: 600px;height:400px;"></div>

步骤3：初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

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

步骤4：准备配置项
这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

var option = { 
	xAxis: { 
		type: 'category', 
		data: ['小明', '小红', '小王'] },
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			name: '语文', 
			type: 'bar', 
			data: [70, 92, 87], 
		} 
	] 
}

步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)

一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的

1.2 相关配置讲解

xAxis
直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现

yAxis
直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制

series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可. 网址:https://echarts.apache.org/zh/option.html

2. ECharts常用图表

2.1 图表1 柱状图

2.1.1 柱状图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px;height:400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		</script>
	</body>
</html>

此时 option 是一个空空如也的对象

步骤2 准备x轴的数据

var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

步骤3 准备 y 轴的数据

var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

步骤4 准备 option , 将 series 中的 type 的值设置为: bar

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr 
		},
	yAxis: { 
		type: 'value' 
		},
	series: [ 
		{ 
			type: 'bar', 
			data:yDataArr 
		} 
	] 
}

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

最终的效果如下图:

2.1.2 柱状图的常见效果

标记:
- 最大值\最小值 markPoint

series: [ 
	{ 
		...... 
		markPoint: { 
			data: [ 
				{ 
					type: 'max', name: '最大值' 
				},
				{ 
					type: 'min', name: '最小值' 
				} 
			] 
		} 
	} 
]

- 平均值 markLine

series: [ 
	{ 
		...... 
		markLine: { 
			data: [ 
				{ 
					type: 'average', name: '平均值' 
				} 
			] 
		} 
	} 
]

显示
- 数值显示 label

series: [ 
	{ 
		...... 
		label: { 
			show: true, // 是否可见 
			rotate: 60 // 旋转角度 
		} 
	} 
]

- 柱宽度 barWidth

series: [ 
	{ 
		...... 
		barWidth: '30%' // 柱的宽度 
	} 
]

- 横向柱状图
  所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可

var option = { 
	xAxis: { 
		type: 'value' 
	},
	yAxis: { 
		type: 'category', 
		data: xDataArr 
	},
	series: [ 
		{ 
			type: 'bar', 
			data: yDataArr 
		} 
	] 
}

2.1.3 柱状图特点

柱状图描述的是分类数据，呈现的是每一个分类中『有多少？』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

2.1.4 通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

标题: title

var option = { 
	title: { 
		text: "成绩", // 标题文字 
		textStyle: { 
			color: 'red' // 文字颜色 
		},
		borderWidth: 5, // 标题边框 b
		orderColor: 'green', // 标题边框颜色 
		borderRadius: 5, // 标题边框圆角 
		left: 20, // 标题的位置 
		top: 20 // 标题的位置 
	} 
}

提示框: tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
- 触发类型: trigger

可选值有item\axis

- 触发时机: triggerOn

可选值有 mouseOver\click

- 格式化显示: formatter
- - 字符串模板

var option = { 
	tooltip: { 
		trigger: 'item', 
		triggerOn: 'click', 
		formatter: '{b}:{c}' 
	} 
}
//这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

- - 回调函数

var option = { 
	tooltip: { 
		trigger: 'item', 
		triggerOn: 'click', 
		formatter: function (arg) { 
			return arg.name + ':' + arg.data 
		} 
	} 
}

工具按钮: toolbox
toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具

工具栏的按钮是配置在 feature 的节点之下

var option = { 
	toolbox: { 
		feature: { 
			saveAsImage: {}, // 将图表保存为图片 
			dataView: {}, // 是否显示出原始数据 
			restore: {}, // 还原图表 
			dataZoom: {}, // 数据缩放 
			magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 
				type: ['bar', 'line'] 
			} 
		} 
	} 
}

图例: legend
legend 是图例,用于筛选类别,需要和 series 配合使用
- legend 中的 data 是一个数组
- legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

var option = { 
	legend: { 
		data: ['语文', '数学'] 
	},
	xAxis: { 
		type: 'category', 
		data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			name: '语文', 
			type: 'bar', 
			data: [88, 92, 63, 77, 94, 80, 72, 86] 
		}, {
			name: '数学', 
			type: 'bar', 
			data: [93, 60, 61, 82, 95, 70, 71, 86] 
		} 
	] 
}

2.2 图表2 折线图

2.2.1 折线图的实现步骤

步骤1 ECharts 最基本的代码结构

DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js">script>
	head>
	<body>
		<div style="width: 600px;height:400px">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		script>
	body>
html>

此时 option 是一个空空如也的对象

步骤2 准备 x 轴的数据

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

步骤3 准备 y 轴的数据

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]

步骤4 准备 option , 将 series 中的 type 的值设置为: line

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			type: 'line', 
			data:yDataArr 
		} 
	] 
}

最终的效果如下:

2.2.2 折线图的常见效果

标记
- 最大值\最小值 markPoint

var option = { 
	series: [ 
		{ 
			...... 
			markPoint: {
				data: [ 
					{ 
						type: 'max', 
						name: '最大值' 
					}, {
						type: 'min', 
						name: '最小值' 
					} 
				] 
			} 
		} 
	] 
}

- 平均值 markLine

var option = { 
	series: [ 
		{ 
			...... 
			markLine: { 
				data: [ 
					{ 
						type: 'average', 
						name: '平均值' 
					} 
				] 
			} 
		} 
	] 
}

- 标注区间 markArea

var option = { 
	series: [ 
		{ 
			...... 
			markArea: { 
				data: [ 
					[ 
						{ 
							xAxis: '1月' 
						}, {
							xAxis: '2月' 
						}
					],
					[ 
						{ 
							xAxis: '7月' 
						}, {
							xAxis: '8月' 
						} 
					] 
				] 
			} 
		} 
	] 
}

线条控制
- 平滑线条 smooth

var option = { 
	series: [ 
		{ 
			...... 
			smooth: true 
		} 
	] 
}

- 线条样式 lineStyle

var option = { 
	series: [ 
		{ 
			...... 
			smooth: true, 
			lineStyle: { 
				color: 'green', 
				type: 'dashed' // 可选值还有 dotted solid 
			} 
		} 
	] 
}

填充风格 areaStyle

var option = { 
	series: [ 
		{ 
			type: 'line', 
			data: yDataArr, 
			areaStyle: { 
				color: 'pink' 
			} 
		} 
	] 
}

紧挨边缘 boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

var option = { 
	xAxis: { 
		type: 'category', 
		data: xDataArr, 
		boundaryGap: false 
	} 
}

放, 脱离0值比例
- 如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多 
var option = { 
	xAxis: {
		type: 'category', 
		data: xDataArr 
	},
	yAxis: { 
		type: 'value' 
	},
	series: [ 
		{ 
			type: 'line', 
			data: yDataArr 
		} 
	] 
}

效果如下图:

这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例

- scale 配置
  scale 应该配置给 y 轴

var option = { 
	yAxis: { 
		type: 'value', 
		scale: true 
	} 
}

堆叠图
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

<script>
	var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
	var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
	var option = {
		xAxis: {
			type: 'category',
			data: xDataArr
		},
		yAxis: {
			type: 'value',
			scale: true
		},
		series: [{
			type: 'line',
			data: yDataArr1
		}, {
			type: 'line',
			data: yDataArr2
		}]
	}
	mCharts.setOption(option)
</script>

使用了堆叠图之后:

var option = {
			series: [{
						type: 'line',
						data: yDataArr1,
						stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意写 
					},
					{ 
						type: 'line', 
						data: yDataArr2, 
						stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意 写 
					} ,
				] ,
			}

蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基础之上进行绘制. 基于前一个图表进行堆叠

2.2.3 折线图的特点

折线图更多的使用来呈现数据随时间的『变化趋势』

2.3 图表3 散点图

2.3.1 散点图的实现步骤

步骤1 ECharts 最基本的代码结构

DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js">script>
	head>
	<body>
		<div style="width: 600px;height:400px">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		script>
	body>
html>

此时 option 是一个空空如也的对象

步骤2 准备 x 轴和 y 轴的数据

var data = [{
	"gender": "female",
	"height": 161.2,
	"weight": 51.6
}, {
	"gender": "female",
	"height": 167.5,
	"weight": 59
}, {
	"gender": "female",
	"height": 159.5,
	"weight": 49.2
}, {
	"gender": "female",
	"height": 157,
	"weight": 63
}, {
	"gender": "female",
	"height": 155.8,
	"weight": 53.6
}, {
	"gender": "female",
	"height": 170,
	"weight": 59
}, {
	"gender": "female",
	"height": 159.1,
	"weight": 47.6
}, {
	"gender": "female",
	"height": 166,
	"weight": 69.8
}, {
	"gender": "female",
	"height": 176.2,
	"weight": 66.8
}, {
	"gender": "female",
	"height": 160.2,
	"weight": 75.2
}, {
	"gender": "female",
	"height": 172.5,
	"weight": 55.2
}, {
	"gender": "female",
	"height": 170.9,
	"weight": 54.2
}, {
	"gender": "female",
	"height": 172.9,
	"weight": 62.5
}, {
	"gender": "female",
	"height": 153.4,
	"weight": 42
}, {
	"gender": "female",
	"height": 160,
	"weight": 50
}, {
	"gender": "female",
	"height": 147.2,
	"weight": 49.8
}, ...此处省略...]

假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散点图需要的数据

var axisData = []
for (var i = 0; i < data.length; i++) {
	var height = data[i].height
	var weight = data[i].weight
	var itemArr = [height, weight] axisData.push(itemArr)
}

axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重

步骤3 准备配置项
- xAxis 和 yAxis 的 type 都要设置为 value
- 在 series 下设置 type:scatter

var option = {
	xAxis: {
		type: 'value'
	},
	yAxis: {
		type: 'value'
	},
	series: [{
		type: 'scatter',
		data: axisData
	}]
}

步骤4 调整配置项, 脱离0值比例
给 xAxis 和 yAxis 配置 scale 的值为 true

var option = {
	xAxis: {
		type: 'value',
		scale: true
	},
	yAxis: {
		type: 'value',
		scale: true
	},
	series: [{
		type: 'scatter',
		data: axisData,
	}]
}

2.3.2 散点图的常见效果

气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
- symbolSize 控制散点的大小
- itemStyle.color 控制散点的颜色

这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:

var option = {
	series: [{
		type: 'scatter',
		data: axisData,
		symbolSize: 25,
		itemStyle: {
			color: 'green',
		}
	}]
}

回调函数的写法如下:

var option = {
	series: [{
		type: 'scatter',
		data: axisData,
		symbolSize: function(arg) {
			var weight = arg[1]
			var height = arg[0] / 100 
			// BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 
			// BMI: 体重/ 身高*身高 kg m
			var bmi = weight / (height * height) if (bmi > 28) {
				return 20
			}
			return 5
		},
		itemStyle: {
			color: function(arg) {
				var weight = arg.data[1]
				var height = arg.data[0] / 100
				var bmi = weight / (height * height) if (bmi > 28) {
					return 'red'
				}
				return 'green'
			}
		}
	}]
}

涟漪动画效果
- type:effectScatter
  将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果
- rippleEffect
  rippleEffect 可以配置涟漪动画的大小

var option = {
	series: [{
		type: 'effectScatter',
		rippleEffect: {
			scale: 3
		}
	}]
}

- showEffectOn
  showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis render 代表界面渲染完成就开始涟漪动画
  emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

var option = {
	series: [{
		type: 'effectScatter',
		showEffectOn: 'emphasis',
		rippleEffect: {
			scale: 3
		}
	}]
}

2.3.3 散点图的特点

散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重

散点图也经常用在地图的标注上

2.3.4 直角坐标系的常见配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图折线图散点图针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
- 显示 grid
  show: true
- grid 的边框
  borderWidth : 10
- grid 的位置和大小
  left top right bottom
  width height

var option = {
	grid: {
		show: true, // 显示grid 
		borderWidth: 10, // grid的边框宽度 
		borderColor: 'red', // grid的边框颜色 
		left: 100, // grid的位置 
		top: 100, 
		width: 300, // grid的大小 
		height: 150 ,
	} ,
}

配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
- 坐标轴类型 type
  value : 数值轴, 自动会从目标数据中读取数据
  category : 类目轴, 该类型必须通过 data 设置类目数据
- 坐标轴位置
  xAxis : 可取值为 top 或者 bottom
  yAxis : 可取值为 left 或者 right

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr,
		position: 'top'
	},
	yAxis: {
		type: 'value',
		position: 'right'
	}
}

配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着可以配置多个区域缩放器
- 区域缩放类型 type
  slider : 滑块
  inside : 内置, 依靠鼠标滚轮或者双指缩放
- 产生作用的轴
  xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
  yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
- 指明初始状态的缩放情况
  start : 数据窗口范围的起始百分比
  end : 数据窗口范围的结束百分比

var option = {
	xAxis: {
		type: 'category',
		data: xDataArr
	},
	yAxis: {
		type: 'value'
	},
	dataZoom: [{
		type: 'slider',
		xAxisIndex: 0
	}, {
		type: 'slider',
		yAxisIndex: 0,
		start: 0,
		end: 80
	}]
}

需要注意的是, 针对于非直角坐标系图表, 比如饼图地图等, 以上三个配置可能就不会生效了

2.4 .图表4 饼图

2.4.1 饼图的实现步骤

步骤1 ECharts 最基本的代码结构

DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js">script>
	head>
	<body>
		<div style="width: 600px;height:400px">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		script>
	body>
html>

此时 option 是一个空空如也的对象

步骤2 准备数据

var pieData = [{
	value: 11231,
	name: "淘宝",
}, {
	value: 22673,
	name: "京东"
}, {
	value: 6123,
	name: "唯品会"
}, {
	value: 8989,
	name: "1号店"
}, {
	value: 6700,
	name: "聚美优品"
}]

步骤3 准备配置项在 series 下设置 type:pie

var option = {
	series: [{
		type: 'pie',
		data: pieData

注意:

- 饼图的数据是由 name 和 value 组成的字典所形成的数组
- 饼图无须配置 xAxis 和 yAxis

2.4.2 饼图的常见效果

显示数值
- label.show : 显示文字
- label.formatter : 格式化文字

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		label: {
			show: true,
			formatter: function(arg) {
				return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
			}
		}
	}]
}

南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
- roseType:‘radius’

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		label: {
			show: true,
			formatter: function(arg) {
				return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
			}
		},
		roseType: 'radius'
	}]
}

选中效果
- selectedMode: ‘multiple’
  选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
- selectedOffset: 30
  选中扇区的偏移距离

var option = {
		series: [
			{
					type: 'pie',
					data: pieData,
					selectedMode: 'multiple', // selectedOffset: 30 
			} ,
		] ,
	}

圆环
- radius
  饼图的半径。可以为如下类型：
  number ：直接指定外半径值。 string ：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以将饼图设置为圆环图

var option = {
	series: [{
		type: 'pie',
		data: pieData,
		radius: ['50%', '70%']
	}]
}

2.4.3 饼图的特点

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

2.5 图表5 地图

2.5.1 地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的

2.5.2 矢量地图的实现步骤

步骤1 ECharts 最基本的代码结构

DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js">script>
	head>
	<body>
		<div style="width: 600px;height:400px">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		script>
	body>
html>

此时 option 是一个空空如也的对象

步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下
步骤3 使用 Ajax 获取 china.json

$.get('json/map/china.json', function (chinaJson) { })

步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
echarts.registerMap(‘chinaMap’, chinaJson)

$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })

步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : ‘map’
map : ‘chinaMap’

var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
	echarts.registerMap('chinaMap', chinaJson) var option = {
		geo: {
			type: 'map', // map是一个固定的值
			map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
		}
	};
	mCharts.setOption(option)
})

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

2.5.3 地图的常见配置

缩放拖动: roam

var option = {
	geo: {
		type: 'map', // map是一个固定的值 
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
		roam: true, // 运行使用鼠标进行拖动和缩放 
	} ,
}

名称显示: label

var option = {
		geo: {
			type: 'map', // map是一个固定的值 
			map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
			roam: true, 
			label: { 
				show: true ,
			} ,
		} ,
	}

初始缩放比例: zoom
地图中心点: center

var option = {
	geo: {
		type: 'map', // map是一个固定的值 
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致, 
		roam: true, 
		label: { 
			show: true ,
			},
		zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
		center: [87.617733, 43.792818] ,// 当前视角的中心点，用经纬度表示 
	} ,
}

2.5.4 地图的常见效果

显示某个区域
- 准备安徽省的矢量地图数据
- 加载安徽省地图的矢量数据

$.get('json/map/anhui.json', function (anhuiJson) { })

- 在Ajax的回调函数中注册地图矢量数据
  echarts.registerMap(‘anhui’, anhuiJson)
- 配置 geo 的 type:‘map’ , map:‘anhui’
- 通过 zoom 调整缩放比例
- 通过 center 调整中心点

< script >
	var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/anhui.json', function(anhuiJson) {
		console.log(anhuiJson) echarts.registerMap('anhui', anhuiJson) var option = {
			geo: {
				type: 'map',
				map: 'anhui',
				label: {
					show: true
				},
				zoom: 1.2,
				center: [116.507676, 31.752889]
			}
		};
		mCharts.setOption(option)
	}) < /script>

不同城市颜色不同
- 1.显示基本的中国地图

DOCTYPE html>
<html lang="en">
	<body>
		<div style="width: 600px;height:400px;border:1px solid red">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
				echarts.registerMap('chinaMap', chinaJson) var option = {
					geo: {
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label: {
							show: true
						}
					}
				}
				mCharts.setOption(option)
			})
		script>
	body>
html>

- 2.准备好城市空气质量的数据, 并且将数据设置给 series

var airData = [{
		name: '北京',
		value: 39.92
	}, {
		name: '天津',
		value: 39.13
	}, {
		name: '上海',
		value: 31.22
	}, {
		name: '重庆',
		value: 66
	}, {
		name: '河北',
		value: 147
	}, {
		name: '河南',
		value: 113
	}, {
		name: '云南',
		value: 25.04
	}, {
		name: '辽宁',
		value: 50
	}, {
		name: '黑龙江',
		value: 114
	}, {
		name: '湖南',
		value: 175
	}, {
		name: '安徽',
		value: 117
	}, {
		name: '山 东',
		value: 92
	}, {
		name: '新疆',
		value: 84
	}, {
		name: '江苏',
		value: 67
	}, {
		name: '浙江',
		value: 84
	}, {
		name: '江西',
		value: 96
	}, {
		name: '湖北',
		value: 273
	}, {
		name: '广西',
		value: 59
	}, {
		name: '甘肃',
		value: 99
	}, {
		name: '山西',
		value: 39
	}, {
		name: '内蒙古',
		value: 58
	}, {
		name: '陕西',
		value: 61
	}, {
		name: '吉林',
		value: 51
	}, {
		name: '福建',
		value: 29
	}, {
		name: '贵州',
		value: 71
	}, {
		name: '广东',
		value: 38
	}, {
		name: '青海',
		value: 57
	}, {
		name: '西藏',
		value: 24
	}, {
		name: '四川',
		value: 58
	}, {
		name: '宁夏',
		value: 52
	}, {
		name: '海南',
		value: 54
	}, {
		name: '台湾',
		value: 88
	}, {
		name: '香港',
		value: 66
	}, {
		name: '澳门',
		value: 77
	}, {
		name: '南海诸岛',
		value: 55
	}]......
	var option = {
		......series: [{
			data: airData
		}]
	}

- 3.将 series 下的数据和 geo 关联起来
  geoIndex: 0
  type: ‘map’

var option = {
	series: [{
		data: airData,
		geoIndex: 0,
		type: 'map'
	}]
}

- 4.结合 visualMap 配合使用
  visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {
		geo: {
			type: 'map',
			map: 'chinaMap',
			roam: true,
			label: {
				show: true
			}
		},
		series: [{
			data: airData,
			geoIndex: 0,
			type: 'map'
		}],
		visualMap: {
			min: 0, // 最小值 
			max: 300, // 最大值 
			inRange: { 
				color: ['white', 'red'] ,// 颜色的范围 
			},
			calculable: true ,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 
		} ,
	}

地图和散点图结合
- 1.给 series 这个数组下增加新的对象
- 2.准备好散点数据,设置给新对象的 data

var scatterData = [{
		value: [117.283042, 31.86119] ,// 散点的坐标, 使用的是经纬度 
	} ,
]

- 3.配置新对象的 type
  type:effectScatter
- 让散点图使用地图坐标系统
  coordinateSystem: ‘geo’
- 让涟漪的效果更加明显
  rippleEffect: { scale: 10 }

var option = {
	series: [{
		data: airData,
		geoIndex: 0,
		type: 'map'
	}, {
		data: scatterData,
		type: 'effectScatter',
		coordinateSystem: 'geo',
		rippleEffect: {
			scale: 10
		}
	}]
}

2.6 图表6 雷达图

步骤1 ECharts 最基本的代码结构

DOCTYPE html>
<html lang="en">
	<head>
		<script src="js/echarts.min.js">script>
	head>
	<body>
		<div style="width: 600px;height:400px">div>
		<script>
			var mCharts = echarts.init(document.querySelector("div")) var option = {}
			mCharts.setOption(option)
		script>
	body>
html>

此时 option 是一个空空如也的对象

步骤2 定义各个维度的最大值

var dataMax = [{
	name: '易用性',
	max: 100
}, {
	name: '功能',
	max: 100
}, {
	name: '拍照',
	max: 100
}, {
	name: '跑分',
	max: 100
}, {
	name: '续航',
	max: 100
}]

步骤3 准备具体产品的数据

var hwScore = [80, 90, 80, 82, 90] 
var zxScore = [70, 82, 75, 70, 78]

步骤4 在 series 下设置 type:radar

var option = {
	radar: {
		indicator: dataMax
	},
	series: [{
		type: 'radar',
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
	3.6 .2.雷达图的常见效果
	显示数值 label
}

2.6.1 雷达图的常见效果

显示数值 label

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

区域面积 areaStyle

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		areaStyle: {},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

绘制类型 shape
雷达图绘制类型，支持 ‘polygon’ 和 ‘circle’
‘polygon’ : 多边形
‘circle’ 圆形

var option = {
	radar: {
		indicator: dataMax,
		shape: 'circle'
	},
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
			name: '华为手机1',
			value: hwScore
		}, {
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

3. 配置项小结

3.1 柱状图 bar

3.2 折线图 line

3.3 散点图 scatter

3.4 饼图 pie

3.5 地图 map

3.6 雷达图 radar

3.7 直角坐标系配置

3.8 通用配置

你可能感兴趣的:(数据可视化,信息可视化,echarts,前端)

地推话术，如何应对地推过程中家长的拒绝校师学
相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
高级编程--XML+socket练习题 masa010 java 开发语言
1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
git常用命令笔记咩酱-小羊 git 笔记
###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
python os.environ 江湖偌大 python 深度学习
os.environ['TF_CPP_MIN_LOG_LEVEL']='0'#默认值，输出所有信息os.environ['TF_CPP_MIN_LOG_LEVEL']='1'#屏蔽通知信息（INFO）os.environ['TF_CPP_MIN_LOG_LEVEL']='2'#屏蔽通知信息和警告信息（INFO\WARNING）os.environ['TF_CPP_MIN_LOG_LEVEL']='
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
基于社交网络算法优化的二维最大熵图像分割智能算法研学社（Jack旭）智能优化算法应用图像分割算法 php 开发语言
智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
特殊的拜年飘雪的天堂
文/雪儿大年初一，家家户户没有了轰响的鞭炮声，大街上没有了人流涌动的喧闹，几乎看不到人影，变得冷冷清清。天刚亮不大会儿，村里的大喇叭响了起来：由于当前正值疾病高发期，流感流行的高峰期。同时，新型冠状病毒感染的肺炎进入第二波流行的上升期。为了自己和他人的健康安全着想，请大家尽量不要串门拜年，不要在街里走动。可以通过手机微信，视频，电话，信息拜年……今年的春节真是特别。禁止燃放鞭炮，烟花爆竹，禁止出村
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
使用Apify加载Twitter消息以进行微调的完整指南 nseejrukjhad twitter easyui 前端 python
#使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。
深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库 python
深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
log4j配置 yy爱yy
#log4j.rootLogger配置的是大于等于当前级别的日志信息的输出#log4j.rootLogger用法:（注意appenderName可以是一个或多个）#log4j.rootLogger=日志级别,appenderName1,appenderName2,....#log4j.appender.appenderName2定义的是日志的输出方式，有两种：一种是命令行输出或者叫控制台输出，另一
MYSQL面试系列-04 king01299 面试 mysql 面试
MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
2022现在哪个打车软件比较好用又便宜实惠的打车软件合集高省APP珊珊
这是一个信息高速传播的社会。信息可以通过手机，微信，自媒体，抖音等方式进行传播。但同时这也是一个交通四通发达的社会。高省APP，是2022年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，注册送2皇冠会员，送万元推广大礼包，教你如何1年做到百万团队。高
没有邀请码怎么注册买手妈妈? 氧惠评测
买手妈妈怎么注册小编为大家带来买手妈妈没有邀请码怎么注册。打开买手妈妈APP，点击“马上注册”，输入邀请信息“邀请码”点击下一步，没有邀请码是登录不上的，所以这个必须要填写，那我们没有怎么办？填写成功就可以登录下一步。这里面有手机登录和淘宝登录，手机登录以后也需要用淘宝授权的，所以基本上都是淘宝登录。购物、看电影、点外卖、用氧惠APP！更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客
pyecharts——绘制柱形图折线图 2224070247 信息可视化 python java 数据可视化
一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
01-Git初识 Meereen Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
福袋生活邀请码在哪里填写，福袋生活app邀请码使用教程小小编007
很多人下载福袋生活后，注册使用时需要填写邀请码。因为福袋生活是注册邀请制，所以首次使用填写邀请码才可以正常登录使用。福袋生活是广州市福袋生活信息科技有限公司旗下一家多元化社交电商导购平台，以APP为载体，社群为媒介，汇集衣食住行、吃喝玩乐生活服务板块，使用福袋生活可以领到淘宝，拼多多等电商平台的商品优惠券和返利，还可以兼职去分享赚钱。我为什么从福袋生活转到果冻宝盒呢？当然是因为福袋生活返利更高，注
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
mac电脑命令行获取电量小米人er 我的博客 macos 命令行
在macOS上，有几个命令行工具可以用来获取电量信息，最常用的是pmset命令。你可以通过以下方式来查看电池状态和电量信息：查看电池状态：pmset-gbatt这个命令会返回类似下面的输出：Nowdrawingfrom'BatteryPower'-InternalBattery-0(id=1234567)95%;discharging;4:02remainingpresent:true输出中包括电
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
nosql数据库技术与应用知识点皆过客，揽星河 NoSQL nosql 数据库大数据数据分析数据结构非关系型数据库
Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
android 网络百合不是茶网络
android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来方便查找 , 服务器使用的是TomCat 服务器代码; servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
[读书笔记]读法拉第传 comsci 读书笔记
1831年的时候,一年可以赚到1000英镑的人..应该很少的... 要成为一个科学家,没有足够的资金支持,很多实验都无法完成但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
随机数的产生沐刃青蛟随机数
c++中阐述随机数的方法有两种：一是产生假随机数（不管操作多少次，所产生的数都不会改变）这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 //默认种子 for (int i = 0; i < 5; i++) { cout<<
PHP检测函数所在的文件名 IT独行者 PHP 函数
很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。创建引用脚本。代码： [php] view plain copy // Filename: functions.php <?php&nbs
银行各系统功能简介文强chu 金融
银行各系统功能简介　业务系统核心业务系统业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等清分清算系统以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程国际结算系
Python学习1(pip django 安装以及第一个project) 小桔子 python django pip
最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
php 数组 aichenglong PHP 排序数组循环多维数组
1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
安装python2.7 AILIKES python
安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp /opt/soft/Python-2
java异常的处理探讨百合不是茶 JAVA异常
//java异常 /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常 b,抛出异常 c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常 */ //2，学会使用try-catch-finally来处理异常
getElementsByName实例 bijian1013 element
实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
探索JUnit4扩展：Runner bijian1013 java 单元测试 JUnit
参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。文章地址：http://www.blogjava.net/jiangshachina/archive/20
[MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
1. 副本集的特性 1)一台主服务器(Primary),多台从服务器(Secondary) 2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 2
【Spark八十一】Hive in the spark assembly bit1129 assembly
Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
Nginx问题定位之监控进程异常退出 ronin47
nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
方法一：常用方法关闭XML验证工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。方法二：（个人推荐）添加内容如下 <?xml version=
Netty源码学习-DefaultChannelPipeline bylijinnan netty
package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
MYSQL数据库常用备份及恢复语句 chicony mysql
备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码数据库名 > 文件备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
小白谈谈云计算--基于Google三大论文 CrazyMizzz Google 云计算 GFS
之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。我先说说GFS &n
hadoop 平衡空间设置方法 daizj hadoop balancer
在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property> <name>dfs.balance.bandwidthPerSec</name> <value>10485760</value> <description&g
Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
Android学习之路 dcj3sjt126com Android学习
转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。下面说说我学习Android的感受，我学Android首先是看MARS的视
java 遍历Map的四种方法 eksliang java HashMap java 遍历Map的四种方法
转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
【精典】数据库相关相关 gengzg 数据库
package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
自动补全 huyana_town 自动补全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
jquery在线预览PDF文件，打开PDF文件天梯梦 jquery
最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
ViewPager刷新单个页面的方法 lovelease android viewpager tag 刷新
使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
利用按位取反（~）从复合枚举值里清除枚举值草料场 enum
以 C# 中的 System.Drawing.FontStyle 为例。如果需要同时有多种效果，如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline; 如果需要去除 style 里的某一种效果，
Linux系统新手学习的11点建议刘星宇编程工作 linux 脚本
　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAO Hibernate
/** * 方法描述:sql语句查询返回List<Class> * 方法备注: Class 只能是自定义类 * @param calzz * @param sql * @return * 创建人：王川 * 创建时间：Jul