有动画的 圆弧渐变进度条echarts 柱状配置项内容和展示

      let num = 0;
var bfb = '60';
var rich = {
    white: {
        fontSize: 30,
        color: '#21F0FF',
        fontWeight: '500',
        // fontStyle: 'oblique',
        padding: [10, 0, 0, 0]
    },
    bule: {
        fontSize: 60,
        fontFamily: 'DINBold',
        color: '#21F0FF',
        // fontWeight: '700',
        // fontStyle: 'italic',
        padding: [10, 0, 0, 0],
    },
    radius: {
        width: 350,
        height: 80,
        // lineHeight:80,
        // borderWidth: 1,
        // borderColor: '#0092F2',
        fontSize: 36,
        color: '#FFE58D',
        // fontWeight: 'bold',
        // backgroundColor: '#1B215B',
        // borderRadius: 20,
        textAlign: 'center',
    },
    size: {
        height: 400,
        padding: [100, 0, 0, 0]
    }
}

option = {
    backgroundColor: '#076696',
    title: {
    // text: '外籍人员\n\n' + bfb,
    text: ['{radius|外籍人员占比}\n','{bule|'+bfb+'}','{white|%}'].join(''),
    textStyle: {
      color: '#FFFDBB',
      fontSize: 50,
      fontWeight: 'bold',
      rich: rich,
    },
    left: 'center',
    bottom: '37%',

    itemGap: 60,
  },
    polar: {
        center: ['50%', '50%'],
        radius: '300',
    },
    angleAxis: {
        show: false,
        max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
        type: 'value',
        startAngle: 225, //极坐标初始角度
        splitLine: {
            show: false,
        },
    },
    barMaxWidth: 40, //圆环宽度

    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    series: [
        {
            name: '',
            type: 'bar',
            // roundCap: true,
            barWidth: 40,
            // showBackground: true,
            // backgroundStyle: {
            //     color: 'rgba(66, 66, 66, .3)',
            // },
            data: [bfb],
            coordinateSystem: 'polar',

            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#02d6fc',
                        },
                        {
                            offset: 1,
                            color: '#0469AA',
                        },
                    ]),
                    borderWidth: 2,
                    shadowBlur: 20,
                    borderColor: '#02BFD3',
                    shadowColor: '#076696',
                },
            },
            barGap: '-100%', //柱间距离,上下两层圆环重合
            // coordinateSystem: 'polar',
            // roundCap: true, //顶端圆角从 v4.5.0 开始支持
            z: 2, //圆环层级，同zindex
        },
        {
            //下层圆环，显示最大值
            name: '123',
            type: 'bar',
            barWidth: 40,
            data: [
                {
                    value: 100,
                    itemStyle: {
                        color: {
                            // 完成的圆环的颜色
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#045990', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#045990', // 100% 处的颜色
                                },
                            ],
                        },
                        borderWidth: 2,
                        shadowBlur: 20,
                        borderColor: '#02BFD3',
                        shadowColor: '#076696',
                    },
                },
            ],
            barGap: '-100%',
            coordinateSystem: 'polar',
            // roundCap: true,
            z: 1,
        },
        // {
        //     type: 'gauge',
        //     name: '',
        //     radius: '57%',
        //     startAngle: '0',
        //     endAngle: '-359.99',
        //     splitNumber: '200',
        //     center: ['50%', '50%'],
        //     pointer: {
        //         show: false
        //     },
        //     title: {
        //         show: false
        //     },
        //     detail: {
        //         show: false
        //     },
        //     data: [{
        //         value: 95,
        //         name: ''
        //     }],
        //     axisLine: {
        //         lineStyle: {
        //             width: 20,
        //             opacity: 0
        //         }
        //     },
        //     axisTick: {
        //         show: false
        //     },
        //     splitLine: {
        //         show: true,
        //         length: 13,
        //         lineStyle: {
        //             color: {
        //                 type: 'linear',
        //                 x: 1,
        //                 y: 0,
        //                 x2: 0,
        //                 y2: 0,
        //                 colorStops: [{
        //                     offset: 0,
        //                     color: '#111'
        //                 }, {
        //                     offset: 0.5,
        //                     color: 'rgba(66, 66, 66, 1)',
        //                 }, {
        //                     offset: 1,
        //                     color: '#111'
        //                 }],
        //                 globalCoord: false
        //             },
        //             width: 1,
        //             type: 'solid',
        //         },
        //     },
        //     axisLabel: {
        //         show: false
        //     }
        // },
        // {
        //     name: '',
        //     type: 'pie',
        //     startAngle: 90,
        //     radius: ['60%', '62%'],
        //     hoverAnimation: false,
        //     center: ['50%', '50%'],
        //     itemStyle: {
        //         normal: {
        //             labelLine: {
        //                 show: false
        //             },
        //             color: 'rgba(66, 66, 66, .4)',
        //             shadowBlur: 10,
        //             shadowColor: 'rgba(253, 249, 20, .3)',
        //         }
        //     },
        //     data: [{
        //         value: 100,

        //     }]
        // },
        // {
        //     name: '',
        //     type: 'pie',
        //     startAngle: 90,
        //     radius: ['62.5%', '64%'],
        //     hoverAnimation: false,
        //     center: ['50%', '50%'],
        //     itemStyle: {
        //         normal: {
        //             labelLine: {
        //                 show: false
        //             },
        //             color: 'rgba(66, 66, 66, .3)',
        //             shadowBlur: 10,
        //             shadowColor: 'rgba(253, 249, 20, .3)',
        //         }
        //     },
        //     data: [{
        //         value: 100,

        //     }]
        // },
        // {
        //     name: '',
        //     type: 'pie',
        //     startAngle: 90,
        //     radius: ['64.5%', '65.8%'],
        //     hoverAnimation: false,
        //     center: ['50%', '50%'],
        //     itemStyle: {
        //         normal: {
        //             labelLine: {
        //                 show: false
        //             },
        //             color: 'rgba(66, 66, 66, .2)',
        //             shadowBlur: 10,
        //             shadowColor: 'rgba(253, 249, 20, .3)',
        //         }
        //     },
        //     data: [{
        //         value: 100,

        //     }]
        // },
        // {
        //     name: '',
        //     type: 'pie',
        //     startAngle: 90,
        //     radius: ['66.5%', '67.5%'],
        //     hoverAnimation: false,
        //     center: ['50%', '50%'],
        //     itemStyle: {
        //         normal: {
        //             labelLine: {
        //                 show: false
        //             },
        //             color: 'rgba(66, 66, 66, .1)',
        //             shadowBlur: 10,
        //             shadowColor: 'rgba(253, 249, 20, .3)',
        //         }
        //     },
        //     data: [{
        //         value: 100,

        //     }]
        // },
        // {
        //     name: "",
        //     type: 'custom',
        //     coordinateSystem: "none",
        //     renderItem: function(params, api) {
        //         return {
        //             type: 'arc',
        //             shape: {
        //                 cx: api.getWidth() / 2,
        //                 cy: api.getHeight() / 2,
        //                 r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.545,
        //                 startAngle: (0+num) * Math.PI / 180,
        //                 endAngle: (1+num) * Math.PI / 180
        //             },
        //             style: {
        //                 stroke: "#fdf914",
        //                 fill: "transparent",
        //                 lineWidth: 5
        //             },
        //             silent: true
        //         };
        //     },
        //     data: [0]
        // },
    ],
};
function numb() {
    num = num + 5;
    myChart.setOption(option, true);
}
setInterval(function () {
    numb();
}, 100);