带负数的饼echarts linear配置项内容和展示

      
    let data = [{
        name: "移动线上",
        value: 10,
        truevalue: 10,
    }, {
        name: "移动线下",
        value: 10,
        truevalue: 10,
    }, {
        name: "联通线上",
        value: 10,
        truevalue: -8,
        
    }, ]
    let name = data.map((item) => item.name)
    let value = data.map((item) => item.truevalue)
    let sum = value.reduce((a, b) => {
        return a + b
    })
    let color = [
        [
            ["#f24e50", "#f0de23"],
            ["#19cddd", "#19ecb6"],
            ["#29a0f9", "#5041f6"],
            ["#d819a7", "#8719e5"],
        ],
        ["rgba(24, 183, 142,0.1)",
            "rgba(1, 179, 238,0.1)",
            "rgba(22, 75, 205,0.1)",
            "rgba(52, 52, 176,0.1)"
        ]
    ]
    let series = []
    let yAxis = []
    for (let i = 0; i < data.length; i++) {
        let fx = data[i].truevalue<0?true:false
        
        series.push({
            name: "",
            type: "pie",
            clockWise: fx, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [82.5 - i * 20 + "%", 82 - i * 20 + "%"],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
            },
            data: [
                {
                    value: Math.abs(data[i].value),
                    name: data[i].name,
                    itemStyle: {
                        borderWidth: 3,
                        borderRadius: 30,
                        borderColor: {
                            type: 'linear',
                            x: 1,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            // 0% 处的颜色                           // 100% 处的颜色
                            colorStops: [{
                                offset: 0,
                                color: color[0][i][0]
                            }, {
                                offset: 1,
                                color: color[0][i][1]
                            }],
                            global: false // 缺省为 false
                        },
                    }
                },
                {
                    value: Math.abs(sum - data[i].value),
                    name: "",
                    itemStyle: {
                        color: 'transparent',
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }
            ]
        })
        series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [82.5 - i * 20 + "%", 82 - i * 20 + "%"],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5
            },
            data: [{
                value: 10,
                itemStyle: {
                    color: "#21446a",
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            },
            {
                value: 0,
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 100,
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }
            ]
        })
        yAxis.push({
            name:data[i].name,
            ratio:((data[i].value / sum) * 100).toFixed(2) + "%",
            qoq: '50%'
        })
    }
    option = {
        backgroundColor: '#012248',
        color: color[0],
        tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a}<br>{b}:{c}({d}%)"
        },
        grid: {
            top: "4%",
            left: "51%",
            width: "40%",
            height: "40%",
            containLabel: false
        },
        // yAxis: [{
        //     type: "category",
        //     inverse: true,
        //     axisLine: {
        //         show: false
        //     },
        //     axisTick: {
        //         show: false
        //     },
        //     axisLabel: {
        //         // formatter: "{b}:{c}({d}%)",
        //         formatter: function (value,index) {
        //             console.log(yAxis[index])
        //             let ydataObj = `{name|${yAxis[index].name}.....}{qoq|环比${yAxis[index].qoq}}`
        //             return ydataObj
        //         },
        //         rich: {
        //             name: {
        //                 color: '#2e96ff',
        //                 fontSize: 14
        //             },
        //         },
        //         interval: 0,
        //         inside: true,
        //         textStyle: {
        //             color: function(value,index) { 
        //                 var colorList =  ["rgb(242,81,80)", "rgb(25,206,220)","rgb(43,156,249)", "rgb(212,25,170)"]
        //                 return  colorList[index]
        //             },
        //             fontSize: 14
        //         },
        //         show: true
        //     },
        //     data: yAxis
        // }],
        xAxis: [{
            show: false,
        }],
        series: series
    };