效果:
在series里设置:
roseType: 'radius',
即可实现一粗一细效果。
series-pie. roseType
是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小。
'area' 所有扇区圆心角相同,仅通过半径展现数据大小。
图中细的部分为线性渐变,粗的部分为环形渐变
环形渐变和线性渐变:
color: [
// 环形渐变
{
global: true,
type: 'radial',
x: this.fontSize(0.61),
y: this.fontSize(0.61),
r: this.fontSize(0.61),
colorStops: [
{
offset: 0,
color: "#FFE29E", // 0% 处的颜色
},
{
offset: 1,
color: "#DD9C00", // 100% 处的颜色
},
],
},
// 线性渐变
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(221, 156, 0, 0.2)", // 0% 处的颜色
},
{
offset: 0.3,
color: "rgba(255, 226, 158, 0.2)", // 0% 处的颜色
},
{
offset: 0.7,
color: "rgba(255, 226, 158, 0.2)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(221, 156, 0, 0.2)", // 0% 处的颜色
},
],
}
],