本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制饼图与环形图，只需要将series中的type设置为"radar"即可，
其中，series系列中的数据内容数组，可以为单个数值：
1[12, 34, 56, 10, 23]
如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：
1[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]
一般情况下，为了更为清晰，需要为每个数据项指定名称，此时数组中的每一项都是一个对象：
1[{
2 // 数据项的名称
3 name: '数据1',
4 // 数据项值
5 value: 10
6}, {
7 name: '数据2',
8 value: 20
9}]
因此，可以使用下述代码生成一个简单的饼图：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "饼图与环形图"
5 },
6
7 tooltip: {
8 formatter: "{a}<br/>{b}：{c}(占比{d}%)"
9 },
10
11 legend: {},
12
13
14 // 数据系列
15 series: [{
16 name: "类别1",
17 type: "pie",
18 data: [
19 {name:"类别1",value:30},
20 {name:"类别2",value:60},
21 {name:"类别3",value:120},
22 {name:"类别4",value:100},
23 {name:"类别5",value:80},
24 ],
25 }],
26 };
可视化结果如下图所示：
样式设置：
可以通过clockwise参数设置饼图的扇区是否是顺时针排布。
通过selectedMode参数对选中模式进行配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列。此时，在需要被选中的数据项中设置selected:true。
通过itemStyle参数设置图形样式。常用参数如下所示：
| 参数 | 描述 |
|
图形的描边颜色 |
|
描边线宽。为 0 时无描边。 |
|
描边类型。可选：‘solid’、‘dashed’、‘dotted’。 |
|
图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|
用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值。 |
通过label参数设置标签样式。常用参数如下所示：
| 参数 |
描述 |
position |
标签的位置。 可选： ‘outside’——饼图扇区外侧，通过视觉引导线连到相应的扇区。 ‘inside’——饼图扇区内部。 ‘inner’ 同 ‘inside’。 ‘center’ |
formatter |
标签内容格式器，支持字符串模板和回调函数两种形式 |
color |
文字的颜色 |
|
文字字体的风格。可选：‘normal‘、‘italic’、‘oblique’ |
|
文字字体的粗细。可选：‘normal’、‘bold’、‘bolder’、‘lighter’、100 | 200 | 300 | 400… |
|
文字的字体大小 |
alignTo |
标签的对齐方式，仅当 position 值为 'outer' 时有效。
|
通过labelLine参数设置标签的视觉引导线样式。常用参数如下所示：
| 参数 |
描述 |
length |
视觉引导线第一段的长度 |
length2 |
视觉引导项第二段的长度 |
smooth |
是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。 |
lineStyle |
视觉引导线的样式设置，例如颜色、宽度等 |
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "饼图与环形图",
5 textStyle: {
6 color: '#fff' // 标题文字颜色设置为白色
7 }
8 },
9
10 backgroundColor: '#2c343c', // 将背景设置为深色
11
12 tooltip: {
13 formatter: "{a}<br/>{b}：{c}(占比{d}%)"
14 },
15
16 legend: {
17 textStyle: {
18 color: '#fff' // 图例文字颜色设置为白色
19 }
20 },
21
22
23 // 数据系列
24 series: [{
25 name: "系列1",
26 type: "pie",
27 clockwise: false, // 饼图的扇区是否是顺时针排布
28 selectedMode:"single", // 选中模式的配置
29 // 图形样式
30 itemStyle: {
31 borderColor: "rgba(255,255,255,0.5)", // 图形的描边颜色
32 borderWidth: 2, // 图形的描边线宽
33 borderRadius: 10, // 用于指定饼图扇形区块的内外圆角半径
34 },
35 // 标签样式
36 label:{
37 position:"outside", // 标签的位置
38 formatter:"{b}：{c}(占比{d}%)", // 标签内容格式器
39 fontWeight:"bold", // 文字字体的粗细
40 fontSize:14, // 文字的字体大小
41 alignTo:"labelLine", // 标签的对齐方式，仅当 position 值为 'outer' 时有效
42 },
43 // 标签的视觉引导线配置
44 labelLine:{
45 length: 10, // 视觉引导线第一段的长度
46 length2:100, // 视觉引导项第二段的长度
47 },
48 data: [
49 { name: "类别1", value: 30 , selected:true},// 该数据项被选中
50 { name: "类别2", value: 60 },
51 { name: "类别3", value: 120 },
52 { name: "类别4", value: 100 },
53 { name: "类别5", value: 80 },
54 ],
55 }],
56 };
可视化结果如下图所示：
环形图：
通过radius参数设置内外半径大小，就可以将饼图转换为环形图。
饼图的半径。可以为如下类型：
-
number：直接指定外半径值。 -
string：例如，’20%’，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 -
Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。可以将内半径设大显示成圆环图（Donut chart）。
1radius:["35%" , "75%"], // 数组的第一项是内半径，第二项是外半径
可视化结果如下图所示：
南丁格尔图：
通过roseType参数生成南丁格尔图。可选择两种模式区分数据大小：
-
'radius'——扇区圆心角展现数据的百分比，半径展现数据的大小，默认。 -
'area'——所有扇区圆心角相同，仅通过半径展现数据大小。
1roseType:"area", // 是否展示成南丁格尔图
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
