Echarts在线免费图表

 
            let series = [];
let pieDatas = [
    {
        "value": 75,
        "name": "系列一"
    },
    {
        "value": 50,
        "name": "系列二"
    },
    {
        "value": 3,
        "name": "系列三"
    }
];
let maxRadius =  30,
    barWidth = 3,
    barGap =  5;
let showValue = true,showPercent = true;
let barColor =  ["rgba(78, 167, 249, 1)", "rgba(0, 255, 255, 1)","rgba(255, 201, 95, 1)"];
pieDatas.map((item, i) => {
    series.push({
        type: 'pie',
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
        center: [ "30%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            borderRadius:100,
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
            borderWidth: 5,
        },
        data: [{
            value: item.value,
            name: item.name,
            itemStyle: {
                color: barColor[i]
            }
        }, {
            value: 100 - item.value,
            name: '',
            itemStyle: {
                color: "transparent",
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }]
    })
    series.push({
        name: '',
        type: 'pie',
        silent: true,
        z: 0,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
        center: [ "30%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
        },
        data: [{
            value: 1,
            itemStyle: {
                color: "rgba(235, 239, 247, 0.4)",
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }]
    });
})
option = {
       grid: {
        top: '33%',
        bottom: '54%',
        left: "30%",
        containLabel: false
    },
    backgroundColor: 'transparent',
    tooltip: {
        show: false,
    },
	xAxis: [{
		show: false
	}],
    yAxis: [{
		type: 'category',
		inverse: true,
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			inside: true,
			textStyle: {
				color: "#fff",
				fontSize: 14,
			},
			show: false
		},
		data: pieDatas.map(x=> x.value+'%')
	}],
    legend: {
        show: true,
        top: 'middle',
        itemWidth: 8,
        itemHeight: 8,
        itemGap:  10,
        formatter:function(name){
            let res = pieDatas.filter(n=>n.name === name)
            return `${name}  ${res[0]?.value}%`
        },
        textStyle: {
            fontSize:  14,
            color:  'rgba(66, 66, 66, 1)',
            padding: [0,0,0,8]
        }
    },
    series: series,
};