Echarts 玉玦图

data = [{
        name: "AAAA",
        value: 754
    },
    {
        name: "BBBB",
        value: 611
    },
    {
        name: "CCCC",
        value: 400
    },
    {
        name: "DDDD",
        value: 200
    }
];
let colorArr = ['#41d1a5', '#3cc4ff', '#07e373', '#019dff'];
arrName = getArrayValue(data, "name");
arrValue = getArrayValue(data, "value");
sumVal = eval(arrValue.join('+'));
objData = array2obj(data, "name");
optionData = getData(data)

function getArrayValue(array, key) {
    var res = [];
    if (array) {
        array.forEach(function(t) {
            res.push(t[key]);
        });
    }
    return res;
}

function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
    }
    return resObj;
}

function getData(data) {
    var res = {
        series: [],
        yAxis: []
    };
    let center=["25%", "50%"];
    for (let i = 0; i < data.length; i++) {
        let radius=[70 - i * 15 + '%', 65 - i * 15 + '%'];
        res.series.push({
            name: '',
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
             radius,
            center,
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumVal - data[i].value,
                name: '',
                itemStyle: {
                    color: "transparent",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius,
            center,
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "transparent",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, {
                value: 2.5,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.yAxis.push((data[i].value / sumVal * 100).toFixed(2) + "%");
    }
    return res;
}
// 环形图旁边的圆点颜色样式
let rich = {};
colorArr.map((item, index) => {
    rich['circle' + index] = {
        color: item,
        fontSize: 25,
        lineHeight:60
    };
})
// 图例的样式
let legendRich = {
    value: {
        fontSize: 18,
        lineHeight: 30,
        color: "#fff",
        padding:[0,0,0,20]
    },
    per:{
        fontSize: 20,
        lineHeight: 30,
        color: "#fff",
        padding:[0,0,0,20]
    }
};
colorArr.map((item, index) => {
    legendRich['title' + index] = {
        fontSize: 16,
        lineHeight: 15,
        color: item,
         padding:[0,0,0,20]
    };
})
option = {
    backgroundColor: '#000',
    color: colorArr,
    legend: {
        show: true,
        icon: "circle",
        top: "center",
        right: '20%',
        data: arrName,
        width: 100,
        padding: [0, 5],
        itemGap: 25,
        formatter: function(name) {
            let str = ``;
            console.log("objData", objData)
            data.map((item, index) => {
                if (item.name == name) {
                    let per=(item.value/sumVal)*100;
                    str = `{value|${name}}{${'title'+index}|${per.toFixed(2)}%}{per|${(item.value)}}`
                }
            })
            return str;
        },
        textStyle: {
            rich: legendRich
        },
    },
    grid: {
        top: '13%',
        bottom: '58%',
        left: "20%",
        containLabel: false
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            interval: 0,
            inside: true,
            position:"right",
            formatter: function(v, i) {
                return `{${'circle'+i}|●}`
            },
            rich

        },
        data: optionData.yAxis
    }],
    xAxis: [{
        show: false
    }],
    series: optionData.series
};

ending…