Echarts在线免费图表

 
            let imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE5QTg0ODVERjhCRDExRUE5QTY4OEE3Mjg0QjY2Q0UxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE5QTg0ODVFRjhCRDExRUE5QTY4OEE3Mjg0QjY2Q0UxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTlBODQ4NUJGOEJEMTFFQTlBNjg4QTcyODRCNjZDRTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTlBODQ4NUNGOEJEMTFFQTlBNjg4QTcyODRCNjZDRTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4S7LnAAAARy0lEQVR42uydB7QV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';
var num1 = 50;
var num2 = 55;
var num3 = 38;
var num4 = 65;
option = {
    backgroundColor: '#292c33',
    graphic: {
        elements: [{
            type: "image",
            z: 6,
            style: {
                image: imgSrc,
                width: 40,
                height: 40
            },
            left: 'center',
            top: "42%",
            position: [100, 100]
        }]
    },
    title: [{
        text: 'Design elements✍',
        x: '50%',
        y: 30,
        textAlign: 'center',
        textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 30,
            fontWeight: '100',
        },
    },{
        text: 'Lorem ipsum',
        left: '49.5%',
        top: '50%',
        textAlign: 'center',
        textStyle: {
            fontSize: '20',
            color: '#535353',
            textAlign: 'center',
            fontWeight: '400',
        },
    },],
    series: [
        {
            type: 'pie',
            radius: ['30%', '0%'],
            center: ['50%', '50%'],
            z:5,
            data: [{
                label: {
                    show: false
                },
                labelLine: {
                    normal: {
                        smooth: true,
                        lineStyle: {
                            width: 0
                        }
                    }
                },
                value: 100 - num1,
                hoverAnimation: false,
                itemStyle: {
                    color: '#f9f9f9',
                    shadowBlur: 6,
                    shadowColor: 'rgba(0, 0, 0, .6)',
                },
            }]
        },
        {
            type: 'pie',
            radius: ['30%', '37%'],
            center: ['50%', '50%'],
            z:4,
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        color: '#bfd885',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num1,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#f9f9f9',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['37%', '44%'],
            center: ['50%', '50%'],
            z:3,
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        color: '#b9c9c8',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num2,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#f9f9f9',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['44%', '51%'],
            center: ['50%', '50%'],
            z:2,
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        color: '#89d1e9',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num3,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#f9f9f9',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                }
            ]
        },
        {
            type: 'pie',
            radius: ['51%', '58%'],
            center: ['50%', '50%'],
            z:1,
            data: [{
                    hoverOffset: 1,
                    value: num1,
                    name: '',
                    itemStyle: {
                        color: '#ffb43d',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - num4,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#f9f9f9',
                        shadowBlur: 6,
                        shadowColor: 'rgba(0, 0, 0, .6)',
                    },
                }
            ]
        },
    ]
};