echarts环形图加渐变

pieData: [
    { 
        value: 1048, 
        name: '下达',
    },
    { 
        value: 735, 
        name: '招标',
    },
    { 
        value: 580, 
        name: '施工中',
    },
    { 
        value: 484, 
        name: '竣工',
    },
],
    
lineColorMap: {
    '下达': '',
    '招标': '',
    '施工中': '',
    '竣工': ''
} 

setPie(){
    let option = {
        series: [
            {
                type: 'pie',
                radius: ['60%', '70%'],
                label: {
                    show: false
                },
                itemStyle: {
                    color: (params) => {
                        return this.lineColorMap[params.name]
                    },
                },
                data: this.pieData
            }
        ]
    }

    let myChart = echarts.init(this.$refs.pieRef)
    myChart.setOption(option)
},

setLinerColor(){
    //根据数据占比计算各个数据的弧度
    let data = this.pieData
    const categoryAngles = []
    let startArc = 0

    data.forEach(item => {
        const value = item.value
        const total = data.reduce((sum, dataItem) => sum + dataItem.value, 0)
        const angle = (value / total) * 360
        const arc = Math.PI / 180 * angle
        categoryAngles.push({
            name: item.name,
            startArc: startArc,
            endArc: startArc + arc
        })
        startArc += arc
    })
    //配置颜色
    let colorMap = {
        '下达': [
            { offset: 0, color: 'rgba(253, 172, 62, 1)'}, // 0% 处的颜色
            { offset: 1, color: 'rgba(253, 172, 62, 0)'}, // 100% 处的颜色
        ],
        '招标': [
            { offset: 0, color: 'rgba(64, 229, 240, 1)'}, // 100% 处的颜色
            { offset: 1, color: 'rgba(64, 229, 240, 0)'}, // 0% 处的颜色
        ],
        '施工中': [
            { offset: 0, color: 'rgba(52, 150, 239, 1)'}, // 0% 处的颜色
            { offset: 1, color: 'rgba(52, 150, 239, 0)'} // 100% 处的颜色
        ],
        '竣工': [
            { offset: 0, color: 'rgba(98, 201, 100, 1)'}, // 0% 处的颜色
            { offset: 1, color: 'rgba(98, 201, 100, 0)'} // 100% 处的颜色
        ]
    }
    categoryAngles.forEach(el => {
        this.lineColorMap[el.name] = this.getCoordinates(el.startArc,el.endArc,colorMap[el.name])
    })
},

    /**
             * 线性渐变起止方向的计算方法
             * 
             *
             * @param {*} startArc 开始弧度
             * @param {*} endArc 结束弧度
             * @returns 四个坐标 x,y,x2,y2
             */
    getCoordinates(startArc, endArc, color) {
        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 this.getLocation(dx, dy, color)
    },

        getLocation(dx, dy, color) {
            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]
            })
            res.type = 'liner'
            res.colorStops = color
            res.global = false
            return res
        },