ECharts 仪表盘显示有问题

Question

我是在echarts 写好样式复制代码到我的页面的，但是在echarts 上就是可以的在我的页面，就是不行，我看过了。没有重复的id

这是想要的样式

这是有问题的样式，

这是我的代码

const targetCompalteOption = {
    series: [
        {
            type: 'gauge',
            center: ['50%', '50%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 0,
            itemStyle: {
                color: '#176AB1'
            },
            progress: {
                show: true,
                width: 20
            },
            pointer: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 20
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: false,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                fontSize: 20,
                fontWeight: 'bolder',
                formatter: '{value} %',
                color: '#ffffff'
            },
            data: [
                {
                    value: 20
                }
            ]
        }
    ]
}

Answer 1

const targetCompalteOption =  {
    series: [
        {
            type: 'gauge',
            center: ['50%', '50%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 0,
            itemStyle: {
                color: '#176AB1'
            },
            
            progress: {
                show: true,
                width: 20
            },
            pointer: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 20,
                    color:
                      [1, '#e6ebf7'], // 20~30% 蓝轴
                    ],
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: false,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '15%'],
                fontSize: 25,
                fontWeight: 'bolder',
                formatter: '{value} %',
                color: '#3368ad'
            },
            data: [
                {
                    value: 20
                }
            ]
        }
    ]
}