Echarts在线免费图表

 
            let series = [];
let pieDatas = [
    {
        "value": 75,
        "name": "5G"
    },
    {
        "value": 50,
        "name": "3G"
    },
    {
        "value": 3,
        "name": "4G"
    },
];
let maxRadius = 30,
    barWidth = 3,
    barGap = 5;
let showValue = true, showPercent = true;
let barColor = ["rgba(86,147,255,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: ["50%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            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: ["50%", "50%"],
        label: {
            show: false
        },
        itemStyle: {
            label: {
                show: false,
            },
            labelLine: {
                show: false
            },
        },
        data: [{
            value: 1,
            itemStyle: {
                color: "rgba(27,36,62,0.6)",
            },
            tooltip: {
                show: false
            },
            hoverAnimation: false
        }]
    });
})
option = {
    grid: {
        top: '33%',
        bottom: '54%',
        left: "30%",
        containLabel: false
    },
    backgroundColor: '#000',
    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,
            },
            margin: 195,
            show: true
        },
        data: pieDatas.map(x => x.value + '%')
    }],
    legend: {
      show: true,
      top: '5%',
      right: '5%',
      icon: 'circle',
      itemWidth: 12,
      itemGap: 20,
      data: ['3G', '4G', '5G'],
      textStyle: {
         fontSize: 14,
         color: '#fff',
      },
   },
    series: series,
};