Echarts-（七）Echarts的饼图

本文最后更新于：December 3, 2021 pm

Apache ECharts一个基于 JavaScript 的开源可视化图表库。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

目录

推荐学习时，多看看官方文档。

官方文档

1.饼图基本实现

方法同前面的柱状图一样，只是数据的存储方式不一样了。饼图需要的是用一个对象存储。[{name：？？？，value：？？？}，{}，{}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var arr = [
				{
					name: '京东',
					value: 1256
				},
				{
					name: '腾讯',
					value: 2343
				},
				{
					name: '阿里',
					value: 432
				},
				{
					name: '天猫',
					value: 678
				},
				{
					name: 'TiMi',
					value: 3249
				},
				{
					name: '网易',
					value: 8654
				},
				{
					name: '苏宁',
					value: 4231
				}
			];
			var option = {
				series:[
					{
						type: 'pie',
						data: arr
					}
				]
				
			}
			myec.setOption(option);

2.常见效果

2.1 显示数值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var option = {
				series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						}
					}
				]
				
			}

2.2 饼图大小（radius）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						},
						radius: 60 //半径60
					}
				]

也可以是百分比。而百分比参照的是盒子宽度和高度中较小的一个的一半来进行百分比设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						},
						radius: '30%' //半径60
					}
				]

2.3 圆环

通过设置两个半径：radius：[’30%‘，’50%‘] 来实现。第一个参数是表示内圆的半径，第二个参数是外圆的半径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						},
						radius: ['40%','60%']
					}
				]

2.4 蓝丁格尔图（roseType）

就是不同的数据对应不同的半径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						},
						roseType: 'radius'
					}
				]

2.5 选中效果（selectedMode）

有两种模式：一种是点击选中某一个的区域后会偏离，当再点击其他的时会返回；另一种就是点击选中的区域后只离开，再点击其他的时候不返回。还可以自定义设置偏离的距离。

  • selectedMode：single（偏离会返回）、multiple（只偏离）。

  • selectedOffset：30。偏离距离的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
series:[
					{
						type: 'pie',
						data: arr,
						label:{
							show:true,
							formatter:function(arg){
								// console.log(arg)
								return arg.name+":\n"+arg.value+":\n"+arg.percent+"%"
							}
						},
						roseType: 'radius',
						// selectedMode: 'single'
						selectedMode: 'multiple',
						selectedOffset: 50
					}
				]