Echarts在线免费图表

 
            data = [{
    'name': '合格物业服务企业',
    'value': 62
}, {
    'name': '良好物业服务企业',
    'value': 29
}, {
    'name': '不合格物业服务企业',
    'value': 28
}, {
    'name': '优秀物业服务企业',
    'value': 46
}]

let color = ['#00C3FF', '#563AD2', '#DE8536', '#ED5450']
option = {
    //你的代码
    backgroundColor: '#081736',
    color: color,
    tooltip: {
        trigger: 'item'
    },
    legend: {
        show: false,
        bottom: '20%',
        itemWidth: 10,
        itemHeight: 10,
        icon: 'circle',
        itemGap: 40,
        textStyle: {
            color: 'rgba(68, 68, 69, 1)',
            fontSize: '14',
        },
    },
    series: [
        {
            type: 'pie',
            data: data,
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: color.map(item => {
                            return item
                        }),
                        padding: [0, -100, 0, -100],
                        fontSize: 13,
                        formatter: function (params) {
                            if (params.name !== '') {
                                return '{percent|' + params.name + '}\n{cir' + params.dataIndex + '|●}\n{name|' + params.value + ' 家' + '}';
                            } else {
                                return '';
                            }

                        },
                        rich: {
                            name: {
                                color: "#fff",
                                fontSize: 16,
                                align: 'center'
                            },
                            percent: {
                                fontFamily: 'DIN',
                                fontWeight: 500,
                                fontSize: 14,
                                color: '#fff',
                                align: 'center'
                            },
                            cir0: {
                                fontSize: 15,
                                opacity: 1,
                                color: 'rgba(69, 188, 238, 1)',
                                padding: [0, 92, 0, 92]
                            },
                            cir1: {
                                fontSize: 15,
                                opacity: 1,
                                color: 'rgba(120, 100, 239, 1)',
                                padding: [0, 92, 0, 92]
                            },
                            cir2: {
                                fontSize: 15,
                                opacity: 1,
                                color: 'rgba(255, 107, 100, 1)',
                                padding: [0, 92, 0, 92]
                            },
                            cir3: {
                                fontSize: 15,
                                opacity: 1,
                                color: 'rgba(255, 173, 77, 1)',
                                padding: [0, 92, 0, 92]
                            }
                        }
                    },
                    labelLine: {
                        length: 27,
                        length2: 30,
                        show: true,
                        color: '#00ffff'
                    }
                }
            },
            name: '',
            hoverAnimation: false,
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
    refreshChart(myChart, option);
}
// 刷新图表
function refreshChart(chartID, option) {
    setInterval(function () {
        chartID.clear();
        chartID.setOption(option, true)
    }, 5000)
}