Echarts在线免费图表

 
            const datas = {
			        	    value:63.5,
			        	    text:"在线率"
			        	}
option = {
    backgroundColor:"#000",
    series: [
        /*仪表盘图，做中间刻度线*/
    	{
    		type: 'gauge',
    		name: '',
    		radius:'25%',
    		startAngle:'0',
    		endAngle:'-359.99',
    		center: ['50%', '45%'],
    		splitNumber:'80',
    		pointer:{
    			show:false
    		},
    		title:{
    		    show:false
    		},
    		detail: {
    			show:false
    		},
    		axisLine:{
    			lineStyle: { 
    				width: 20,
    				opacity: 0
    			}
    		},
    		axisTick: {
    			show: false
    		},
    		splitLine: {
    			show: true,
    			length:7,
    			lineStyle: {
    				color:  {
                          type: 'linear',
                          colorStops: [{
                              offset: 0, color: '#01FFFF' // 0% 处的颜色
                          }, {
                              offset: 1, color: '#8124FF' // 100% 处的颜色
                          }],
                        },
    				width: 2,
    				type: 'solid',
    			},
    		},
    		axisLabel: {
    			show: false
    		}
    	},
    	/*内心原型图，展示整体数据概览*/
    	{
        name: 'pie',
        type: 'pie',
        clockWise: true,
        startAngle:90,
        radius: ['20%', '23%'],
        hoverAnimation: false,
        center: ['50%', '45%'],
        data: [{
            value: datas.value,
            label: {
                normal: {
                    formatter: '{d}{cell|%}\n{text|     '+datas.text+'}',
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '23',
                        fontWeight: 'normal',
                        color: '#01FFFF',
                         lineHeight:20,
                        
                        rich:{
                            cell:{
                                 fontSize: '14',
                                fontWeight: 'normal',
                                color: '#01FFFF',
                                padding:[0,0,0,5]
                            },
                            text:{
                                 fontSize: 16,
                                fontFamily: 'FZLanTingHeiS-L-GB',
                                fontFeight: 400,
                                color: '#A1D1EA',
                                padding:[5,35,0,10]
                            }
                        }
                    }
                }
            },
            itemStyle: {
                normal: {
                    color:new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: '#8124FF'
                            }, {
                                offset: 1,
                                color: '#01FFFF'
                            }]),
                    shadowColor: 'rgba(1,1,1,0.5)',
                    shadowBlur: 1
                }
            }
        }, {
            value: 100 -  datas.value,
            name: '',
            itemStyle: {
                normal: {
                    color: 'rgba(247,67,105,0)', // 未完成的圆环的颜色
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                emphasis: {
                    color: 'rgba(44,59,70,0)' // 未完成的圆环的颜色
                }
            }
        }]
    }
    ]
    };