登录注册

环形图圆角(原创)

插件特效
2026-07-26 03:59 3 次浏览 • 0 次下载 5.7KB
环形图圆角(原创)

本插件使用canvas可以帮助你快速创建一个以圆角交界的环形图

兼容性

适用于所有主流浏览器及移动端的浏览器。IE8及以下不支持

安装

1
npm install donut-chart

用法

首先需要一个canvas做载体

1
<canvas id="myCanvas" width="750" height="600"></canvas>

然后创建环形图对象

1
var cir = new DonutChart('myCanvas', option)

最后初始化并且可以指定回调函数

1
2
3
cir.init(function (result) {
// result 选中的选区的相关信息
})

参数

option 示例 (默认值)

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
var option = {
type: 'pie', // pie 环形图|| gauge 计量图
title: {
show: true,
text: '总资产(元)',
textStyle: {
fontSize: "20px",
lineHeight: "30px",
color: '#9f9f9f'
},
subtext: '360',
subtextStyle: {
fontSize: "30px",
lineHeight: "35px",
color: '#e53344'
},
x: '50%', // title 位置
y: "50%",
},
tooltip: {
show: true,
fontStyle: "normal", // 规定字体样式 normal || italic || oblique
fontVariant: "normal", // 规定字体变体 normal || small-caps
fontWeight: 'normal', // 规定字体的粗细 normal || bold || bolder || lighter || 100 || 200 || 300 || 400 || 500 || 600 || 700 || 800 || 900
fontSize: "20px", // 规定字号，以像素计
lineHeight: "30px", // 规定行高，以像素计
fontFamily: 'Arial',// 规定字体系列
color: 'white', // 字体颜色
backgroundColor: '#00000099', // tip 背景
formatter: function (param) { // 类似echarts 富文本编辑
var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
"元}"
return str
},
rich: {
a: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
color: 'white',
},
c: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'normal',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
color: 'white',
},
b: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "30px",
lineHeight: "35px",
fontFamily: 'Arial',
color: '#e53344',
}
}
},
x: "50%", // 图标位置
y: "50%",
radius: "30%", // 半径
lineWidth: "5%", // 圆环宽度
// {{if type === gauge 计量图}}
// max: 120, // 映射总值
// data: [{
// name: "已用时长（分钟）",
// value: 85, // 映射计量值
// }],
// {{else if type === pie 环形图}}
// data: [{
// name: "账户余额(元)",
// value: 110,
// }, {
// name: "散标待回(元)",
// value: 120,
// }, {
// name: "在途资金(元)",
// value: 130,
// }],
// {{/if}}
label: {
show: true,
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
color: '#9f9f9f',
formatter: function (param) {
var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
"元}"
return str
},
rich: {
a: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
},
b: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "30px",
lineHeight: "35px",
fontFamily: 'Arial',
color: '#e53344',
},
c: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 'bold',
fontSize: "20px",
lineHeight: "30px",
fontFamily: 'Arial',
}
}
},
capType: "round", // 圆角 || butt 平角
selectedStyle: { // 选中时的样式
color: "white", // 包边颜色
borderWidth: 10 // 包边宽度
},
color: ["#fe7c00", "#e83227", "#32a676"],
labelCoverTitle: true, // label 是否覆盖标题
backgroundArc: '#999' // 空圆环的颜色
}
评论