起因

在画饼图的过程中 ，为了好看会加上很多炫酷的渐变。如图：

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

总结

后来想了想 初始的限制条件 有取巧的成分在，有缘再优化把