Echarts在线免费图表

 
            let max = 200;
let value = 100;
let colorBar = {
    type: 'linear',
    // 两端添加透明度,模拟两端线收缩
    colorStops: [
        {
            offset: 0,
            color: 'rgba(65, 197, 95, 1)', // 0% 处的颜色
        },
        {
            offset: 1,
            color: 'rgba(65, 197, 95, 1)', // 100% 处的颜色
        }
    ],
};
let color = 'rgba(245, 246, 252, 1)';

option = {
    title:[
        {
        // text:'累计基桩数'+a,
         text: '{c|' + '累计基桩数 ' + '}{a|' +max + '}',
         x: 'center',
         y:'8%',
        textStyle: {
                        rich: {
                            a: {
                                fontSize: 18,
                                color: 'rgba(23, 26, 29, 0.6000)',
                                fontWeight:700
                            },

                            c: {
                                fontSize: 14,
                               color:'rgba(23, 26, 29, 0.6000)',
                                padding: [5, 0]
                            }
                        }
                    },
                  
    },
    {
       
         text:'{a|' +value +' '+ '}{a|'+' ' +(value/max*100).toFixed(2) +'%'+ '}\n{c|' + '完成检测基桩' + '}',
         x: 'center',
         y:'38%',
       
                     textStyle:{
                          rich: {
                            a: {
                                color:'rgba(65, 197, 95, 1)',
                    fontSize:18,
                    fontWeight:700,
                    height:40
                    // padding:[0,0,50,0],
                            },

                            c: {
                                fontSize: 14,
                               color:'rgba(23, 26, 29, 0.6000)',
                                padding: [5, 0]
                            }
                        }
                     }
    }
    ],
    angleAxis: {
        show: false,
        max: (max * 360) / 180,
        type: 'value',
        startAngle: 180,
        splitLine: {
            show: false,
        },
    },
    //圆环位置和大小
    polar: {
        center:[100,100],
        radius: '100%',
    },
    radiusAxis: {
        show: false,
        type: 'category',
    },
    series: [
        {
            type:'pie',
            radius:'100%',
            center:['50%','50%'],
            itemStyle:{
                color:'rgba(0,0,0,0)'
            },
            data:[1],
            // label:{
            //     show:true,
            //     textStyle:{
                   
            //         rich: {
            //                 a: {
            //                     color:'rgba(65, 197, 95, 1)',
            //         fontSize:18,
            //         fontWeight:700,
            //         height:40
        
            //                 },

            //                 c: {
            //                     fontSize: 14,
            //                    color:'rgba(23, 26, 29, 0.6000)',
            //                     padding: [5, 0]
            //                 }
            //             }
            //     },
            //     position:'center',
      
            //     formatter:()=>{
            //         return '{a|' +value +' '+ '}{a|'+' ' +(value/max*100).toFixed(2) +'%'+ '}\n{c|' + '完成检测基桩' + '}'

           
            //     }
            // }
        },
        {
            type: 'bar',
            data: [value],
            barWidth: 40,
            stack: 'sameBar',
            coordinateSystem: 'polar',
            z: 3,
            itemStyle: {
                color: colorBar,
                // shadowColor: colorBar,
                // shadowBlur: 3,
            },
        },
       
        {
            type: 'bar',
            data: [ max - value ],
            barWidth: 40,
            stack: 'sameBar',
            coordinateSystem: 'polar',
            z: 3,
            itemStyle: {
                color: color,
            },
        },
   
    ],
};