Echarts在线免费图表

 
            option = {
    backgroundColor: '#00264d',
    graphic:[
        /*最外层圆线*/
        {
            type:'circle',
            left:'center',
            top:'middle',
            shape:{
                r:380
            },
            style:{
                fill:'#113048'
            }
        },
        /*最底层圆*/
        {
            type:'ring',
            left:'center',
            top:'middle',
            shape:{
                r:390,
                r0:392
            },
            style:{
                fill:'#113048'
            }
        }
    ],
	series: [
	    /*仪表盘图，做中间刻度线*/
		{
			type: 'gauge',
			name: '业务指标',
			radius:'60%',
			startAngle:'0',
			endAngle:'-359.99',
			splitNumber:'100',
			pointer:{
				show:false
			},
			title:{
			    show:false
			},
			detail: {
    			show:false
			},
			data: [{value: 95, name: '完成率'}],
			axisLine:{
				lineStyle: {
					color:[[1,new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: 'rgba(4, 234,255, 1)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(74, 87,254, 1)'
                    }, {
                        offset:1,
                       color: 'rgba(59, 119,254, 1)'
                    }])]],
					width: 20,
					opacity: 1
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: true,
				length:20,
				lineStyle: {
					color: 'rgba(255,255,255,1)',
					width: 2,
					type: 'solid',
				},
			},
			axisLabel: {
				show: false
			}
		},
		/*内心原型图，展示整体数据概览*/
		{
        name: 'pie',
        type: 'pie',
        clockWise: true,
        startAngle:-270,
        radius: ['48%', '50%'],
        hoverAnimation: false,
        center: ['50%', '50%'],
        data: [{
            value: 5,
            label: {
                normal: {
                    formatter: '{d}%',
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '35',
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#f74369',
                    shadowColor: '#f74369',
                    shadowBlur: 10
                }
            }
        }, {
            value: 5,
            name: 'invisible',
            itemStyle: {
                normal: {
                    color: 'rgba(247,67,105,0)', // 未完成的圆环的颜色
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                emphasis: {
                    color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
                }
            }
        }]
    },
        /*外层环形图，展示详细占比*/
        {
        name: 'pie',
        type: 'pie',
        clockWise: true,
        startAngle:-270,
        radius: ['60%', '65%'],
        hoverAnimation: false,
        center: ['50%', '50%'],
        data: [{
            value: 5,
            name:'1',
            itemStyle:{
                normal:{
                    color:'#e7b507'
                }
            }
        },
        {
            value: 25,
            name:'1',
            itemStyle:{
                normal:{
                    color:'#009eff'
                }
            }
        },
        {
            value: 15,
            name:'1',
            itemStyle:{
                normal:{
                    color:'#f74369'
                }
            }
        }],
        itemStyle:{
            normal:{
                borderWidth:3,
                borderColor:'#00264d'
            }
        }
    }
	]
};