环形进度条echarts 柱状配置项内容和展示

      option = {
    title: [
        {
            text: '',
            show: false,
            x: 'center',
            top: '46%',
            textStyle: {
                color: '#333',
                fontSize: 14,
                fontWeight: 50,
            },
        },
    ],
    //   detail: {
    //     valueAnimation: true,
    //     fontSize: 25,
    //     fontWeight: '400',
    //     color: 'rgb(51,51,51)',
    //     offsetCenter: [0, '40%'],
    // },
    angleAxis: {
        show: false,
        max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
        type: 'value',
        startAngle: 225, //极坐标初始角度
        splitLine: {
            show: false,
        },
    },
    barMaxWidth: 10, //圆环宽度
    radiusAxis: {
        show: false,
        type: 'category',
    },
    //圆环位置和大小
    polar: {
        center: ['50%', '50%'],
        radius: '100%',
    },
    series: [
        {
            type: 'bar',
            stack: '测试',
            data: [
                {
                    //上层圆环，显示数据
                    value: 78,
                    name: 'sdfasdf',
                    itemStyle: {
                        color: '#80B8FF',
                    },
                },
            ],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角从 v4.5.0 开始支持
            z: 2, //圆环层级，同zindex
            //       detail: {
            //     valueAnimation: true,
            //     fontSize: 25,
            //     fontWeight: '400',
            //     color: 'rgb(51,51,51)',
            //     offsetCenter: [0, '40%'],
            // },
        },
        {
            //下层圆环，显示最大值
            type: 'bar',
            data: [
                {
                    value: 100,
                    itemStyle: {
                        color: {
                            //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1, //从左到右 0-1
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#CBE5FB',
                                },
                                {
                                    offset: 1,
                                    color: '#CBE5FB',
                                },
                            ],
                        },
                    },
                },
            ],
            barGap: '-100%',
            coordinateSystem: 'polar',
            roundCap: true,
            z: 1,
        },
        {
            stack: '测试',
            type: 'bar',
            data: [0.01],
            showBackground: false,
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            itemStyle: {
                color: '#fff',
                borderColor: 'rgba(255,255,255, 1)',
                borderWidth: 5,
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10,
                shadowOffsetY: 2,
            },
        },
        {
            name: '外部刻度',
            type: 'gauge',
            //  center: ['20%', '50%'],
            radius: '70%',
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 4, //刻度数量
            startAngle: 225,
            endAngle: -45,

            axisLine: {
                show: true,
                // 仪表盘刻度线
                lineStyle: {
                    width: 1,
                    color: [[1, '#FFFFFF']],
                },
            },
            //仪表盘文字
            axisLabel: {
                show: true,
                color: '#333',
                distance: -10,
                fontSize: 10,
                formatter: function (value) {
                    return value + '%';
                },
            }, //刻度标签。
            axisTick: {
                show: true,
                splitNumber: 2,
                lineStyle: {
                    color: '#333', //用颜色渐变函数不起作用
                    width: 1,
                },
                length,
            }, //刻度样式
            splitLine: {
                show: true,
                length: -1,
                lineStyle: {
                    color: '#333', //用颜色渐变函数不起作用
                },
            }, //分隔线样式
            detail: {
                show: true,
                valueAnimation: true,
                fontSize: 35,
                fontWeight: '400',
                color: 'rgb(51,51,51)',
                offsetCenter: [0, '40%'],
            },
            pointer: {
                show: false,
            },
            title: {
                show: true,
                offsetCenter: [0, '-10%'],
                textStyle: {
                    fontSize: 15,
                    color: '#333',
                },
            },
            data: [
                {
                    value: 78,
                    name: '产量',
                },
            ],
        },
    ],
};