ducha-qianduan/public/taishi/right3_1.js

function right3_1(data){
    	var myChart = echarts.init(document.getElementById('right3_1'), 'vintage');
// data = [{
//         name: "电脑",
//         value:10
//     },
//     {
//         name: "手机",
//         value:23
//     },
//     {
//         name: "相机",
//         value:9
//     },
//     {
//         name: "刻录机",
//         value:15
//     },
//     {
//         name: "移动载体",
//         value: 20
//     },
// ];
arrName = getArrayValue(data, "name");
arrValue = getArrayValue(data, "value");
sumValue = eval(arrValue.join('+'));
objData = array2obj(data, "name");
optionData = getData(data)

function getArrayValue(array, key) {
    var key = key || "value";
    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: []
    };
    for (let i = 0; i < data.length; i++) {
        // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
        res.series.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 15 + '%', 70 - i * 15 + '%'],
            center: ["50%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 0,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumValue - data[i].value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [80 - i * 15 + '%', 70 - i * 15 + '%'],
            center: ["50%", "55%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 0,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "rgb(3, 31, 62)",
                    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 / sumValue * 100).toFixed(2) + "%");
    }
    return res;
}

option = {
    legend: {
        show: true,
        selectedMode:
        false,
        icon: "circle",
        top: "center",
        top: '12%',
        bottom: '53%',
        left: "55%",
        data: arrName,
        width: 40,
        padding: [0, 5],
        itemGap: 5,
        formatter: function(name) {
            return "{title|" + name + "}{value|" + (objData[name].value) + "}  {title|台}"
        },

        textStyle: {
            rich: {
                title: {
                    fontSize: 20,
                    lineHeight: 30,
                    color: "#00e4ff"
                },
                value: {
                    fontSize:30,
					padding:[0,8,0,10],
                    lineHeight: 20,
                    color: "#fcdc00"
                }
            }
        },
    },
    tooltip: {
        show: true,
        trigger: "item",
        formatter: "{a}{b}:{c}({d}%)",
        textStyle:{
            fontSize:30
        }
    },
    color: ['#e6923e', '#3ee679','#3e6de6',  'rgb(52, 52, 176)'],
    xAxis: [{
        show: false
    }],
    series: optionData.series
};
		myChart.setOption(option);
}