Echarts在线免费图表

 
            let seriesData = [
    {
        "name": "Ⅰ",
        "value": 300,
        color: "rgba(88, 118, 247,.3)"
    },
    {
        "name": "Ⅱ",
        "value": 200,
        color: "rgba(94, 225, 204,.3)"
    },
    {
        "name": "Ⅲ",
        "value": 100,
        color: "rgba(134, 222, 0,.3)"
    },
    {
        "name": "Ⅳ",
        "value": 50,
        color: "rgba(254, 203, 80,.3)"
    },
     {
        "name": "Ⅴ",
        "value": 50,
        color: "rgba(252, 130, 0,.3)"
    },
     {
        "name": "劣Ⅴ",
        "value": 50,
        color: "rgba(145, 93, 255,.3)"
    }
]
let outData = seriesData.map(item => {
    return {
        value: item.value,
        name: '',//因为不展示label，可不填
        itemStyle: {
            normal: {
                color:item.color
            }
        }
    }
})

var colorList = ['#5876F7', '#51D9A2', '#86DE00', '#FECB50','#FC8200','#915DFF'];
option = {
     legend: {
      orient: 'vertical',
      top: 'center',
      right: 20,
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
      borderRadius: 4,
      textStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 400,
      },
    },
    series: [
        {
            itemStyle: {
                normal: {
                    color: function (params) {
                        return colorList[params.dataIndex]
                    }
                }
            },
            type: 'pie',
            radius: ['20%', '50%'],
            center: ["50%", "50%"],

            label: {
                normal: {
                    show:false
                }
            },
            data: seriesData
        },
        {
            name: '外边框',
            type: 'pie',
            tooltip: {
                show: false,
            },
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],//这里跟上面那组一样即可
            radius: ['50%', '60%'],//这里根据自己的需要自行调整
            label: {
                normal: {
                    show: false //重点：此处主要是为了不展示data中的value和name
                }
            },
            data: outData
        }
    ]
};