起因
在画饼图的过程中 ，为了好看会加上很多炫酷的渐变。如图：
1.png
可以看到他的渐变方式 并不常用的线性渐变，
2.png
这里需要用到另一种渐变方式（RadialGradient）径向渐变
api解析
官方配置项：
x, 代表圆心x位置 数值范围 0-1；
y，代表圆心y位置，数值范围 0-1；
r，代表半径，数值范围 0-1；
offset，类似颜色线性梯度，数值范围 0-1；
boolean，默认false，若最后参数为true，前四个参数将使用像素位置
配置
我们设置下参数：
{
x:0.5,
y:0.5,
R:0.2
}
可以看到如下效果：
3.png
这里发现当设置0.5和0.5 渐变的效果并不在每个区块的中心，我们对每个区块进行下处理。
4.png
可以看到 他的相对位置，其实是根据原本的区块所填充的盒子的中心，
这时候我们想要实现ui图的效果就需要把每个 区块的 渐变中心放到圆心处
先把 roseType去掉 可以清除看到我们要的是对应角度的位置
5.png
分析
第一步，首先设置他的startAngel为0，使得渲染的第一个区块，在角度为0的位置
第二步，对渲染数据进行从到大小排序，echarts默认渲染的时候会有个从小到大的排序，这一步是为了保证你计算的每个中心点的顺序，能对应上区块的顺序
第三步, 计算每个数据的角度 假设初始数据{data:[1,2,3,4,5]} 通过一个圆360度计算得到每个的角度
[
{
data: 1,
angel: 24,
},
{
data: 2,
angel: 48,
},
{
data: 3,
angel: 72,
},
{
data: 4,
angel: 96,
},
{
data: 5,
angel: 120,
},
]
第四步 对起始角度和终止角度进行计算
[
{
"data": 1,
"angel": 24,
"startAngle": 0,
"endAngle": 24
},
{
"data": 2,
"angel": 48,
"startAngle": 24,
"endAngle": 72
},
{
"data": 3,
"angel": 72,
"startAngle": 72,
"endAngle": 144
},
{
"data": 4,
"angel": 96,
"startAngle": 144,
"endAngle": 240
},
{
"data": 5,
"angel": 120,
"startAngle": 240,
"endAngle": 360
}
]
分析
6.png
第一个 第二个很简单设置为 {x:0,y:0 }即可
第三个开始 需要求得 蓝线部分的长度
7.png
X 的距离为 cos(180-终止角度)/ cos(180-终止角度)+sin(90-起始角度)
y 为0
8.png
X的距离为 1
y的距离为 cos(270-终止角度)/cos(90-180+起始角度)+ cos(270-终止角度
第五块
9.png
x的距离 为 cos(180-角度)/1+ cos(180-角度)
y的距离 为1
总结一下规律
在象限内的情况
第四象限内
xy都为0
第三象限内
x为1 y为0
第二象限内
x为1 y为1
第一象限内
x也0 y 为1
横跨2个象限
横跨第四和第三象限：
x为 cos(180-终止角度)/ (cos(180-终止角度)+cos(90-起始角度))
y为0
横跨 第三和第二象限：
X为 1
Y为 cos(270-终止角度)/( cos(90-180+起始角度)+ cos(270-终止角度))
横跨 第二和第一象限：
X为 cos(360-起始角度)/1+ cos(360-起始角度)
Y为1
横跨 3个象限
横跨 432
X为 1/(1+Math.sin(（90-起始角度/180*Math.PI))
Y为 Math.tan(总角度-180+起始角度)
其他
x 和 y都为0.5即可
可得出方法：
var data = [11, 31, 13, 14, 5]
data = data.sort().sort(function (a, b) {
return a - b;
})
var all = 0
data.forEach((item) => {
all += item
})
var group = data.map((item) => {
return {
data: item,
angel: item / all * 360
}
})
var realData = group.map((item, index) => {
let startAngle = 0
for (var i = 0; i < index; i++) {
startAngle += group[i].angel
}
return {
...item,
startAngle: startAngle,
endAngle: startAngle + item.angel
}
})
var seriesData = realData.map((item, index) => {
var x, y, z
var s1 = panduanXx(item.startAngle)
var s2 = panduanXx(item.endAngle)
var angel = item.angel
//判断 横跨了几个象限
if (s2 - s1 == 0) {
if (s1 == 1) {
x = 0
y = 0
} else if (s1 == 2) {
x = 1
y = 0
} else if (s1 == 3) {
x = 1
y = 1
} else {
x = 0
y = 1
}
} else if (s2 - s1 == 1) {
if (s1 == 1) {
x = Math.cos((180 - item.endAngle) / 180 * Math.PI) / (Math.cos((180 - item.endAngle) / 180 * Math.PI) + Math.sin((90 - item.startAngle) / 180 * Math.PI))
y = 0
} else if (s1 == 2) {
x = 1
y = Math.cos((270 - item.endAngle) / 180 * Math.PI) / (Math.cos((270 - item.endAngle) / 180 * Math.PI) + Math.cos((item.startAngle - 90) / 180 * Math.PI))
} else if (s1 == 3) {
x = Math.cos((180 - item.angel) / 180 * Math.PI) / (1 + Math.cos((180 - item.angel) / 180 * Math.PI))
y = 1
}
} else if (s2 - s1 == 2) {
if (s1 == 1) {
x = 1 / (1 + Math.sin((90 - item.startAngle) / 180 * Math.PI))
y = Math.tan((item.angel - 180 + item.startAngle) / 180 * Math.PI)
} else {
x = 0.5
y = 0.5
}
} else {
x = 0.5
y = 1
}
return {
x: x,
y: y,
...item
}
})
function panduanXx(start) {
if (start <= 90) {
return 1
} else if (start > 90 && start <= 180) {
return 2
} else if (start > 180 && start <= 270) {
return 3
} else {
return 4
}
}
console.log(realData, seriesData)
1681524906586.jpg
测试
结果 var data = [1, 2, 3, 4,5]
10.png
var data = [1, 21, 3, 4,15]
11.png
var data = [1, 1, 3, 4,15]
12.png
总结
后来想了想 初始的限制条件 有取巧的成分在，有缘再优化把
网友评论