计算每条数据相应的弧度值
for (let i = 0; i < this.options.data.length; i++) {
data.push({
name: this.options.data[i].isEligible,
value: this.options.data[i].number,
percentage: this.options.data[i].percentage * 100,
_startArc: null,
_endArc: null
})
}
let totalValue = data.reduce((total, item) => total + item.value, 0)
const rangeArr = []
let cacheNum = 0
for (let i = 0; i < data.length; i++) {
const endNum = cacheNum + data[i].value
rangeArr.push([cacheNum, endNum])
cacheNum = endNum
}
const angleArr = rangeArr.map((arr)=> {
return arr.map(num => {
return ((num / totalValue) * 365) * (Math.PI /180)
})
})
for (let i = 0; i < data.length; i++) {
data[i]._startArc = angleArr[i][0]
data[i]._endArc = angleArr[i][1]
}
根据弧度值计算实际的坐标点
function getCoordinates(startArc, endArc) {
const posi = [Math.sin(startArc), -Math.cos(startArc), Math.sin(endArc), -Math.cos(endArc)]
const dx = posi[2] - posi[0]
const dy = posi[3] - posi[1]
return getLocation(dx, dy)
}
function getLocation(dx, dy) {
const tanV = dx / dy
const directSign = Math.abs(tanV) < 1
const t = directSign ? tanV : 1 / tanV
const sign1 = t > 0 ? 1 : -1
const sign2 = dx > 0 ? 1 : -1
const sign = directSign ? sign1 * sign2 : sign2
const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2]
const group2 = sign > 0 ? [0, 1] : [1, 0]
const group = [...group1, ...group2]
const keys = directSign ? ['x', 'x2', 'y', 'y2'] : ['y', 'y2', 'x', 'x2']
let res = {}
keys.forEach((k, idx) => {
res[k] = group[idx]
})
return res
}
for (let i = 0; i < datas.length; i++) {
const startArc = datas[i]._startArc
const endArc = datas[i]._endArc
const coordinates = getCoordinates(startArc, endArc)
datas[i].itemStyle = {
color: {
...coordinates,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + startAlpha + ')'
},
{
offset: 1,
color: 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + endAlpha + ')'
}
]
}
}
}